一、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; /* 讓窗口水平居中展示 */ } }資源搜索網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com
三、根據瀏覽器寬度切換PC和WAP頁面
1. 當頁面寬度大於閾值時，自動切換到PC頁面，當小於閾值時，切換回WAP頁面
WAP頁面
<!DOCTYPE html> <html lang="en"> <head> <title>WAP頁面</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> </head> <body id="wap"> 我是WAP頁面 <script src="https://mat1.gtimg.com/libs/jquery2/2.2.0/jquery.js"></script> <script> function adapt() { var agent; var clientWidth = document.body.clientWidth; console.log(clientWidth); if (clientWidth < 800) { agent = 'wap'; } else { agent = 'pc' } if ($('body').attr('id') !== agent) { location.href = 'pc.html'; } } adapt(); window.onresize = function(){ adapt(); }; </script> </body> </html>PC頁面
<!DOCTYPE html> <html lang="en"> <head> <title>我是PC頁面</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> </head> <body id="pc"> 我是PC頁面 <script src="https://mat1.gtimg.com/libs/jquery2/2.2.0/jquery.js"></script> <script> function adapt() { var agent; var clientWidth = document.body.clientWidth; console.log(clientWidth); if (clientWidth < 800) { agent = 'wap'; } else { agent = 'pc' } if ($('body').attr('id') !== agent) { location.href = 'wap.html'; } } adapt(); window.onresize = function(){ adapt(); }; </script> </body> </html>