亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

WEB頁面實現(xiàn)等比例縮放自適應(yīng) - 通過 rem 和 vw 實現(xiàn)

pubdreamcc / 793人閱讀

摘要：頁面實現(xiàn)等比例縮放自適應(yīng)通過和實現(xiàn)一和簡介是相對長度單位，是指相對于根元素即元素字號大小的倍數(shù)。當(dāng)過大時，以其為基準(zhǔn)的數(shù)值會出現(xiàn)精度丟失，造成較大的誤差。此時，單位會以為基準(zhǔn)進(jìn)行計算，頁面就會整個跑偏。

WEB頁面實現(xiàn)等比例縮放自適應(yīng) - 通過 rem 和 vw 實現(xiàn) 一、rem 和 vw 簡介 1. rem

rem 是相對長度單位，是指相對于根元素(即html元素)font-size(字號大小)的倍數(shù)。

瀏覽器支持：Caniuse

示例

若根元素 font-size 為 12px

html {
    font-size: 12px;
}
h1 { 
    font-size: 2rem;  /* 2 × 12px = 24px */
} 
p {
    font-size: 1.5rem;   /* 1.5 × 12px = 18px */
}
div {
    width: 10rem;  /* 10 × 12px = 120px */
}

若根元素 font-size 為 16px

html {
    font-size: 16px;
}
h1 { 
    font-size: 2rem;  /* 2 × 16px = 32px */
} 
p {
    font-size: 1.5rem;   /* 1.5 × 16px = 24px */
}
div {
    width: 10rem;  /* 10 × 16px = 160px */
}
2. vw

vw 是相對長度單位，相對于瀏覽器窗口的寬度，瀏覽器窗口寬度被均分為100個單位的vw

瀏覽器支持：Caniuse

Opera Mini不支持該屬性

示例

當(dāng)瀏覽器窗口寬度為320px時，1vw = 3.2px

p {
    font-size: 5vw;   /* 5 × 3.2px = 16px */
}
div {
    width: 20vw;  /* 20 × 3.2px = 64px*/
}

當(dāng)瀏覽器窗口寬度為375px時，1vw = 3.75px

p {
    font-size: 5vw;   /* 5 × 3.75px = 18.75px */
}
div {
    width: 20vw;  /* 20 × 3.75px = 75px*/
}
二、rem 和 vw 結(jié)合實現(xiàn)WEB頁面等比例縮放自適應(yīng) 1. 選擇基準(zhǔn)窗口寬度及

示例：
以 iPhone 6/7/8/X 的屏幕寬度 375px 作為基準(zhǔn)窗口寬度；
以 15px 最為 html 元素的 font-size，即rem單位的基本長度。

html {
    font-size: 15px;
}
h1 { 
    font-size: 2rem;  /* 2 × 15px = 30px */
} 
p {
    font-size: 1.2rem;   /* 1.2 × 15px = 18px */
}
div {
    width: 10rem;  /* 10 × 15px = 150px*/
} 
注意：html 元素的 font-size 不宜過大，也不宜過小。
當(dāng) font-size 過大時，以其為基準(zhǔn)的 rem 數(shù)值會出現(xiàn)精度丟失，造成較大的誤差。
當(dāng) font-size 過小時，由于很多主流瀏覽器 font-size 不能小于12px，當(dāng) font-size 小于12px 時，會以 12px 展示。此時，rem 單位會以 12px 為基準(zhǔn)進(jìn)行計算，頁面就會整個跑偏。
2. 將 html 元素的 font-size 替換為使用 vw 表示 
窗口寬度：375px 

=> 1vw  = 3.75px
=> 15px = ( 15 / 3.75 )vw = 4vw

因此， html 元素的 font-size 可以替換為 4vw

html {
    font-size: 4vw;
}
h1 { 
    font-size: 2rem;  /* 2 × 4vw × 3.75px = 30px */
} 
p {
    font-size: 1.2rem;   /* 1.2 × 4vw × 3.75px = 18px */
}
div {
    width: 10rem;  /* 10 × 4vw × 3.75px = 150px*/
}

當(dāng)窗口寬度調(diào)整為320px時

1vw = 3.2px
4vw = 4 × 3.2px = 12.8px

html {
    font-size: 4vw;
}
h1 { 
    font-size: 2rem;  /* 2 × 4vw × 3.2px = 25.6px */
} 
p {
    font-size: 1.2rem;   /* 1.2 × 4vw × 3.2px = 15.36px */
}
div {
    width: 10rem;  /* 10 × 4vw × 3.2px = 128px*/
}

可見，此時所有以rem為單位的字號和長度都會隨著屏幕寬度的放大和縮小而進(jìn)行等比例縮放。

重要的事情說第二遍
注意：html 元素的 font-size 不宜過大，也不宜過小。
當(dāng) font-size 過大時，以其為基準(zhǔn)的 rem 數(shù)值會出現(xiàn)精度丟失，造成較大的誤差。
當(dāng) font-size 過小時，由于很多主流瀏覽器 font-size 不能小于12px，當(dāng) font-size 小于12px 時，會以 12px 展示。此時，rem 單位會以 12px 為基準(zhǔn)進(jìn)行計算，頁面就會整個跑偏。
3. 為頁面設(shè)置最大寬度和最小寬度 當(dāng)頁面小于300px時，不再等比例縮小，當(dāng)頁面大于500px時，不再等比例放大

窗口寬度300px時

1vw  = 3px
4vw = 4 × 3px = 12px

窗口寬度500px時

1vw  = 5px
4vw = 4 × 5px = 20px


@media screen and (max-width: 300px) {
    html {
        width: 300px;
        font-size: 12px;
    }
}

@media screen and (min-width: 500px) {
    html {
        width: 500px;
        font-size: 20px;
        margin: 0 auto;  /* 讓窗口水平居中展示 */
    }
}
三、根據(jù)瀏覽器寬度切換PC和WAP頁面 1. 當(dāng)頁面寬度大于閾值時，自動切換到PC頁面，當(dāng)小于閾值時，切換回WAP頁面 WAP頁面 



    WAP頁面
    


    我是WAP頁面
PC頁面 



    我是PC頁面
    


    我是PC頁面

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/114699.html

相關(guān)文章

  • WEB頁面實現(xiàn)等比例縮放自適應(yīng) - 通過 rem 和 vw 實現(xiàn)

    摘要：頁面實現(xiàn)等比例縮放自適應(yīng)通過和實現(xiàn)一和簡介是相對長度單位，是指相對于根元素即元素字號大小的倍數(shù)。當(dāng)過大時，以其為基準(zhǔn)的數(shù)值會出現(xiàn)精度丟失，造成較大的誤差。此時，單位會以為基準(zhǔn)進(jìn)行計算，頁面就會整個跑偏。 WEB頁面實現(xiàn)等比例縮放自適應(yīng) - 通過 rem 和 vw 實現(xiàn) 一、rem 和 vw 簡介 1. rem rem 是相對長度單位，是指相對于根元素(即html元素)font-size...

    khs1994 評論0 收藏0

  • WEB頁面實現(xiàn)等比例縮放自適應(yīng) - 通過 rem 和 vw 實現(xiàn)

    摘要：頁面實現(xiàn)等比例縮放自適應(yīng)通過和實現(xiàn)一和簡介是相對長度單位，是指相對于根元素即元素字號大小的倍數(shù)。當(dāng)過大時，以其為基準(zhǔn)的數(shù)值會出現(xiàn)精度丟失，造成較大的誤差。此時，單位會以為基準(zhǔn)進(jìn)行計算，頁面就會整個跑偏。 WEB頁面實現(xiàn)等比例縮放自適應(yīng) - 通過 rem 和 vw 實現(xiàn) 一、rem 和 vw 簡介 1. rem rem 是相對長度單位，是指相對于根元素(即html元素)font-size...

    abson 評論0 收藏0

  • rem, vw, 還是...? 各憑本事的移動端適配方案

    摘要：另一種就是不縮放，對等問題單獨引入處理方案。彩蛋部分相信大多數(shù)同學(xué)也是有想法在實際開發(fā)中把融入到現(xiàn)有的移動端適配方案中的。 前言 2018年最后的法定假期都已經(jīng)結(jié)束了，我相信大部分正在進(jìn)行或曾經(jīng)進(jìn)行過移動端頁面開發(fā)的同學(xué)都或多或少的了解過使用rem進(jìn)行移動端頁面適配的方案以及使用vw的方案，(沒了解過的同學(xué)可以參見大漠老師的這兩篇文章 使用Flexible實現(xiàn)手淘H5頁面的終端適配和再...

    wangbinke 評論0 收藏0

  • rem, vw, 還是...? 各憑本事的移動端適配方案

    摘要：另一種就是不縮放，對等問題單獨引入處理方案。彩蛋部分相信大多數(shù)同學(xué)也是有想法在實際開發(fā)中把融入到現(xiàn)有的移動端適配方案中的。 前言 2018年最后的法定假期都已經(jīng)結(jié)束了，我相信大部分正在進(jìn)行或曾經(jīng)進(jìn)行過移動端頁面開發(fā)的同學(xué)都或多或少的了解過使用rem進(jìn)行移動端頁面適配的方案以及使用vw的方案，(沒了解過的同學(xué)可以參見大漠老師的這兩篇文章 使用Flexible實現(xiàn)手淘H5頁面的終端適配和再...

    tianren124 評論0 收藏0

  • 茴字的四種寫法—移動適配方案的進(jìn)化

    摘要：是阿里團(tuán)隊開發(fā)的前端適配方案，也是用的的方法。那么第一種方法其實已經(jīng)能解決前端適配問題了，為什么阿里還要開發(fā)一個呢在第一種方法中，時沒有任何問題，但是在或者更高的手機屏幕上，因為物理像素的增加，存在小于的顯示空間。 話說我剛工作的時候，就開始用rem了，過了沒多久，接觸到了flexible，系統(tǒng)化且支持iOS的retina屏迅速征服了我，最近又看到了大漠大神的vw。所以本文想完成一篇一...

    canger 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<