摘要:頁面實現等比例縮放自適應通過和實現一和簡介是相對長度單位,是指相對于根元素即元素字號大小的倍數。當過大時,以其為基準的數值會出現精度丟失,造成較大的誤差。此時,單位會以為基準進行計算,頁面就會整個跑偏。
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
瀏覽器支持:CaniuseOpera 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 不宜過大,也不宜過小。2. 將 html 元素的 font-size 替換為使用 vw 表示
當 font-size 過大時,以其為基準的 rem 數值會出現精度丟失,造成較大的誤差。
當 font-size 過小時,由于很多主流瀏覽器 font-size 不能小于12px,當 font-size 小于12px 時,會以 12px 展示。此時,rem 單位會以 12px 為基準進行計算,頁面就會整個跑偏。
窗口寬度: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為單位的字號和長度都會隨著屏幕寬度的放大和縮小而進行等比例縮放。
重要的事情說第二遍3. 為頁面設置最大寬度和最小寬度 當頁面小于300px時,不再等比例縮小,當頁面大于500px時,不再等比例放大
注意:html 元素的 font-size 不宜過大,也不宜過小。
當 font-size 過大時,以其為基準的 rem 數值會出現精度丟失,造成較大的誤差。
當 font-size 過小時,由于很多主流瀏覽器 font-size 不能小于12px,當 font-size 小于12px 時,會以 12px 展示。此時,rem 單位會以 12px 為基準進行計算,頁面就會整個跑偏。
窗口寬度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頁面
PC頁面WAP頁面 我是WAP頁面
我是PC頁面 我是PC頁面
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/53937.html
摘要:頁面實現等比例縮放自適應通過和實現一和簡介是相對長度單位,是指相對于根元素即元素字號大小的倍數。當過大時,以其為基準的數值會出現精度丟失,造成較大的誤差。此時,單位會以為基準進行計算,頁面就會整個跑偏。 WEB頁面實現等比例縮放自適應 - 通過 rem 和 vw 實現 一、rem 和 vw 簡介 1. rem rem 是相對長度單位,是指相對于根元素(即html元素)font-size...
摘要:頁面實現等比例縮放自適應通過和實現一和簡介是相對長度單位,是指相對于根元素即元素字號大小的倍數。當過大時,以其為基準的數值會出現精度丟失,造成較大的誤差。此時,單位會以為基準進行計算,頁面就會整個跑偏。 WEB頁面實現等比例縮放自適應 - 通過 rem 和 vw 實現 一、rem 和 vw 簡介 1. rem rem 是相對長度單位,是指相對于根元素(即html元素)font-size...
摘要:另一種就是不縮放,對等問題單獨引入處理方案。彩蛋部分相信大多數同學也是有想法在實際開發中把融入到現有的移動端適配方案中的。 前言 2018年最后的法定假期都已經結束了,我相信大部分正在進行或曾經進行過移動端頁面開發的同學都或多或少的了解過使用rem進行移動端頁面適配的方案以及使用vw的方案,(沒了解過的同學可以參見大漠老師的這兩篇文章 使用Flexible實現手淘H5頁面的終端適配和再...
摘要:另一種就是不縮放,對等問題單獨引入處理方案。彩蛋部分相信大多數同學也是有想法在實際開發中把融入到現有的移動端適配方案中的。 前言 2018年最后的法定假期都已經結束了,我相信大部分正在進行或曾經進行過移動端頁面開發的同學都或多或少的了解過使用rem進行移動端頁面適配的方案以及使用vw的方案,(沒了解過的同學可以參見大漠老師的這兩篇文章 使用Flexible實現手淘H5頁面的終端適配和再...
摘要:是阿里團隊開發的前端適配方案,也是用的的方法。那么第一種方法其實已經能解決前端適配問題了,為什么阿里還要開發一個呢在第一種方法中,時沒有任何問題,但是在或者更高的手機屏幕上,因為物理像素的增加,存在小于的顯示空間。 話說我剛工作的時候,就開始用rem了,過了沒多久,接觸到了flexible,系統化且支持iOS的retina屏迅速征服了我,最近又看到了大漠大神的vw。所以本文想完成一篇一...
閱讀 1261·2023-04-25 19:10
閱讀 1140·2021-09-10 10:50
閱讀 3028·2021-09-02 15:21
閱讀 1383·2019-08-30 15:52
閱讀 1681·2019-08-30 13:56
閱讀 2077·2019-08-30 12:53
閱讀 1870·2019-08-28 18:22
閱讀 2115·2019-08-26 13:47