頁面適配
阿新 • • 發佈：2022-03-31
頁面適配
佈局單位
vw,vh 相對視口大小的百分比大小
px:固定單位
不會隨著視口大小改變而改變
不會隨著裝置螢幕尺寸的大小改變而改變
em,rem:相對單位
em:相對父元素的 font-size 的大小
1em == 父元素的 font-size
2em == 2 _ 父元素的 font-size
rem:相對於根（html）的 font-size 大小
1rem == html 的 font-size 大小
2rem == 2 _ html 的 font-size 大小
自適應佈局
淘寶自適應方案:淘寶無限適配
UI 設計圖多大：移動端寬度 750px PC 端寬度 1920
前端除錯專案以 iPhone6 為基準 寬度 375px
淘寶自適應原理：
html 的 font-size 大小=1rem,因此可以通過改變 html 的 font-size 大小改變所有使用 rem 單位的元素大小
html 的 font-size 初始為 100px,即 100px=1rem。那麼 1px=0.01rem 方便計算
當視口變小時,等比縮小 html 的 font-size,即等比縮小 1rem,即等比縮小所有使用 rem 單位的元素
在縮小過程中，瀏覽器字型最小為 12px,當字型大小縮小到 12px 的時候不會繼續縮小
實戰演練
效果展示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div class="box">1rem</div> <div class="box1">2rem</div> <div class="box2">3rem</div> <script type="text/javascript"> window.onresize = function () { // let designSize = 1920; // PC端設計圖尺寸 let designSize = 750 // 移動端設計圖尺寸 let html = document.documentElement // html節點 let wW = html.clientWidth // 視口寬度 let rem = (wW * 100) / designSize // 計算1rem為多少px document.documentElement.style.fontSize = rem + 'px' //將計算出的1rem的大小設定給html的font-size } </script> <style> html { font-size: 100px; } body { font-size: 0.16rem; } .box { width: 1rem; height: 1rem; background: #aaa; } .box1 { width: 2rem; height: 1rem; background: #444; } .box2 { width: 3rem; height: 1rem; background: red; } </style> </body> </html>