国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

abson / 3200人閱讀

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

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

rem 是相對(duì)長(zhǎng)度單位，是指相對(duì)于根元素(即html元素)font-size(字號(hào)大小)的倍數(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 是相對(duì)長(zhǎng)度單位，相對(duì)于瀏覽器窗口的寬度，瀏覽器窗口寬度被均分為100個(gè)單位的vw

瀏覽器支持：Caniuse

Opera Mini不支持該屬性

示例

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

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

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

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

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

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 過大時(shí)，以其為基準(zhǔn)的 rem 數(shù)值會(huì)出現(xiàn)精度丟失，造成較大的誤差。
當(dāng) font-size 過小時(shí)，由于很多主流瀏覽器 font-size 不能小于12px，當(dāng) font-size 小于12px 時(shí)，會(huì)以 12px 展示。此時(shí)，rem 單位會(huì)以 12px 為基準(zhǔn)進(jìn)行計(jì)算，頁(yè)面就會(huì)整個(gè)跑偏。
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時(shí)

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*/
}

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

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

窗口寬度300px時(shí)

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

窗口寬度500px時(shí)

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頁(yè)面 1. 當(dāng)頁(yè)面寬度大于閾值時(shí)，自動(dòng)切換到PC頁(yè)面，當(dāng)小于閾值時(shí)，切換回WAP頁(yè)面 WAP頁(yè)面 



    WAP頁(yè)面
    


    我是WAP頁(yè)面
PC頁(yè)面 



    我是PC頁(yè)面
    


    我是PC頁(yè)面

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/31561.html

相關(guān)文章

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

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

    pubdreamcc 評(píng)論0 收藏0

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

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

    khs1994 評(píng)論0 收藏0

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

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

    wangbinke 評(píng)論0 收藏0

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

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

    tianren124 評(píng)論0 收藏0

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

    摘要：是阿里團(tuán)隊(duì)開發(fā)的前端適配方案，也是用的的方法。那么第一種方法其實(shí)已經(jīng)能解決前端適配問題了，為什么阿里還要開發(fā)一個(gè)呢在第一種方法中，時(shí)沒有任何問題，但是在或者更高的手機(jī)屏幕上，因?yàn)槲锢硐袼氐脑黾樱嬖谛∮诘娘@示空間。 話說我剛工作的時(shí)候，就開始用rem了，過了沒多久，接觸到了flexible，系統(tǒng)化且支持iOS的retina屏迅速征服了我，最近又看到了大漠大神的vw。所以本文想完成一篇一...

    canger 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

abson

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<