React Redux ES6 Webpack...... 更多幹貨在個人主頁中查看
rem 方案是響應式佈局方案的一部分
什麼是rem
rem是根元素字體的單位，比如 html{font-size:16px;}，1rem相當於16px。
不僅僅可以給字體用，其他px單位的都可以用，比如設padding:2rem，相當於32px。
rem有什麼用
放棄px單位，使用rem作為單位，這樣在不同尺寸的設備上，通過修改根節點的font-size大小，實現等比例縮放。
假設設備寬度為600px，頁面只有2個在一行的div，使用rem寬度如下設置
現在換到寬度為400px的設備上，保持比例相同，只有改變font-size即可
//在js計算字體大小，x為縮小比例 400/600=x/10 x=6.6
為什麼不用百分比呢？豈不是很簡單
百分比是相對於父元素計算的，使用不方便，而且rem多了個字體變化。
如何使用
1 . 給根元素設置字體大小，並在body元素校正
如上設置後，使用rem代替px，直接除100即可
2 . 綁定監聽事件，dom加載後和尺寸變化時改變font-size
自動轉換成rem
這種px轉rem完全可以用 實現自動轉換，比如使用 postcss（待後續補充）
A & Q
為什麼不設置 font-size:62.5%？
因為谷歌有些版本不支持10px大小的字體
為什麼不使用 em？
同百分比一樣，相對於父元素計算不方便
為什麼不使用 viewport等比縮放？
viewport的做法：
這種做法是將屏幕等比縮放，縮放過大時會失真
使用rem web就是響應式的了嗎？
不是，rem只是等比縮放，只解決了響應式佈局的準則 的部分問題 ，還需要配合媒體查詢等
分享到:
閱讀更多 全棧前端 的文章
