單位
px：像素
em：一個(gè) M 的寬度（面試：一個(gè)字的寬度）
rem：root em 根元素（<html>）的 font-size
vh：view height替久，視口高度 100vh === 視口高度
vw：view width乡摹，視口寬度 100vw === 視口寬度
十二像素法則
瀏覽器默認(rèn) font-size:16px;
Chrome瀏覽器默認(rèn)最小字號(hào)為12px：font-size:12px;
所以一般情況下，rem 的font-size不要小于12px;
rem
rem 就是 <html>元素的 font-size，默認(rèn)為 16px;(瀏覽器默認(rèn)font-size)
rem和em 的區(qū)別：
- rem 和 em 沒(méi)有任何聯(lián)系
- rem 是根元素的 font-size
- em 是字體中 M 的寬度
手機(jī)端布局方案
- 百分比
- 整體縮放
百分比布局問(wèn)題：高度無(wú)法確定澎胡，寬度與高度沒(méi)辦法關(guān)聯(lián)到一起。
動(dòng)態(tài)rem
一切單位以屏幕寬度為標(biāo)準(zhǔn)，就能完美還原設(shè)計(jì)稿隅俘。
動(dòng)態(tài)REM思路：動(dòng)態(tài)rem 采用整體縮放的思想，在頁(yè)面渲染之前笤喳，使用JS獲取設(shè)備寬度并設(shè)置rem(1rem == html font-size == viewport width)为居，之后的布局單位全部使用rem來(lái)實(shí)現(xiàn)整體縮放。
使用JS動(dòng)態(tài)調(diào)整rem(寫(xiě)在頁(yè)面頭部)
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script>
var pageWidth = window.innerWidth
document.write('<style>html{font-size:'+pageWidth+'px;}</style>')
</script>
在使用動(dòng)態(tài) rem 布局的移動(dòng)端頁(yè)面中杀狡，很小的寬度如border-width 依然使用px蒙畴，因?yàn)榧词故褂胷em，當(dāng)rem小于1px 時(shí)呜象，依然會(huì)被瀏覽器當(dāng)做1px 使用膳凝。
