移動適配
vw / vh
vw是相對單位, 相對視口的計算結(jié)果
vw：viewport width
1vw = 1/100視口寬度
l vh：viewport height
1vh = 1/100視口高度
vw單位尺寸
- 確定設(shè)計稿對應(yīng)的vw尺寸 （1/100視口寬度）
查看設(shè)計稿寬度 → 確定參考設(shè)備寬度 (視口寬度) → 確定vw尺寸 （1/100 視口寬度） - vw單位的尺寸 = px單位數(shù)值 / ( 1/100 視口寬度 )
vh單位尺寸
- 確定設(shè)計稿對應(yīng)的vh尺寸 （1/100視口高度）
查看設(shè)計稿寬度 → 確定參考設(shè)備高度 (視口高度) → 確定vh尺寸 （1/100 視口高度） - vh單位的尺寸 = px單位數(shù)值 / ( 1/100 視口高度 )
開發(fā)中vw和vh不會混用, 如果混用會導(dǎo)致盒子變形
rem 和 vw / vh 的區(qū)別
rem在目前市場比較常見:
- 需要不斷修改html文字大小
- 需要媒體查詢media
- 需要 flexible.js
vw / vh
是將來的趨勢, 使用無需各種判斷修改
