WEB頁面實現等比例縮放自適應 - 通過 rem 和 vw 實現

abson 發布于2019-07-01 12:49 / 3191人閱讀

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

WEB頁面實現等比例縮放自適應 - 通過 rem 和 vw 實現 一、rem 和 vw 簡介 1. rem

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

瀏覽器支持：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不支持該屬性

示例

當瀏覽器窗口寬度為320px時，1vw = 3.2px

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

當瀏覽器窗口寬度為375px時，1vw = 3.75px

p {
    font-size: 5vw;   /* 5 × 3.75px = 18.75px */
}
div {
    width: 20vw;  /* 20 × 3.75px = 75px*/
}

二、rem 和 vw 結合實現WEB頁面等比例縮放自適應 1. 選擇基準窗口寬度及

示例：
以 iPhone 6/7/8/X 的屏幕寬度 375px 作為基準窗口寬度；
以 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 不宜過大，也不宜過小。
當 font-size 過大時，以其為基準的 rem 數值會出現精度丟失，造成較大的誤差。
當 font-size 過小時，由于很多主流瀏覽器 font-size 不能小于12px，當 font-size 小于12px 時，會以 12px 展示。此時，rem 單位會以 12px 為基準進行計算，頁面就會整個跑偏。

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

當窗口寬度調整為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為單位的字號和長度都會隨著屏幕寬度的放大和縮小而進行等比例縮放。

重要的事情說第二遍
注意：html 元素的 font-size 不宜過大，也不宜過小。
當 font-size 過大時，以其為基準的 rem 數值會出現精度丟失，造成較大的誤差。
當 font-size 過小時，由于很多主流瀏覽器 font-size 不能小于12px，當 font-size 小于12px 時，會以 12px 展示。此時，rem 單位會以 12px 為基準進行計算，頁面就會整個跑偏。

3. 為頁面設置最大寬度和最小寬度 當頁面小于300px時，不再等比例縮小，當頁面大于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;  /* 讓窗口水平居中展示 */
    }
}

三、根據瀏覽器寬度切換PC和WAP頁面 1. 當頁面寬度大于閾值時，自動切換到PC頁面，當小于閾值時，切換回WAP頁面 WAP頁面




    WAP頁面
    


    我是WAP頁面

PC頁面




    我是PC頁面
    


    我是PC頁面

GPU云服務器云服務器等比例縮放圖片 php等比例縮放 rem寬度自適應單例模式實現

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/31561.html

WEB頁面實現等比例縮放自適應 - 通過 rem 和 vw 實現

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

pubdreamcc 2019-08-30 10:59 評論0 收藏0
WEB頁面實現等比例縮放自適應 - 通過 rem 和 vw 實現

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

khs1994 2019-08-02 15:09 評論0 收藏0
rem, vw, 還是...? 各憑本事的移動端適配方案

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

wangbinke 2019-08-29 16:56 評論0 收藏0
rem, vw, 還是...? 各憑本事的移動端適配方案

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

tianren124 2019-08-23 12:21 評論0 收藏0
茴字的四種寫法—移動適配方案的進化

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

canger 2019-08-22 16:12 評論0 收藏0