rem 與 vm 布局
rem布局
方案：
規定 750px 尺寸下， 我們設置根字體 html 的 font-size: 100px，即 1rem = 100px
這樣 750px 尺寸的 PSD 圖片上，量得的寬度/高度，如 150px，寫到 CSS 中的時候，需要經過換算
150px / 100px = 1.5rem
我們隨着設備尺寸變化，按比例 750px / 100px 修改 html 的根字體大小
rem 隨着根字體變化，則頁面上所有用 rem 單位的元素大小也跟着變化
100px html 根字體大小
修改比例公式為: ————— = ———————————————
750px 設備尺寸寬度大小
100px * 設備尺寸寬度大小
html 根字體大小 = ——————————————————————
750px
監聽 resize 方法，設備寬度變化時，執行上面的公式得到根字體大小，並修改 html 的根字體，實現響應式布局
vm 布局
vm 是移動端支持較好的 CSS 屬性，設備寬度 = 100vm，瀏覽器會自動幫我們計算 1vm、12vm、..等等大小
我們在上面的 rem 布局中，750px 寬度下，設置根字體 html 的 font-size: 100px
之后需要用 js 按比例動態計算根字體的大小。然而用 js 沒有用 CSS 修改的速度快
這里我們保持 750px / 100px 的比例
設備寬度 = 100vm
`1vm = 750px / 100px = 7.5px`
根字體大小為 100px，如果以 vm 為單位
根字體大小為
`100px / 1vm = 100px / 7.5px = 13.33vm`
即在 CSS 中設置了 html 的 font-size: 13.33vm , 后續元素單位依舊使用 rem
但是我們不用再自己動態計算根字體的方法了，頁面渲染速度更快