http://www.itdecent.cn/p/d9606faafbaf
1.定義：
rem是相對于根元素（html標(biāo)簽）的字體大小的單位。簡單可理解為屏幕寬度的百分比。
2.原理：
動態(tài)獲取當(dāng)前視口寬度width，除以一個固定的數(shù)n，得到rem的值。表達(dá)式為rem = width / n。通過此方法，rem大小始終為width的n等分。類似于 百分比布局
3.如何動態(tài)計算rem?
function init () {
????// 獲取屏幕寬度
????var width = document.documentElement.clientWidth
????// 設(shè)置根元素字體大小。此時為寬的10等分
????document.documentElement.style.fontSize = width / 10 + 'px'
}
????// 首次加載應(yīng)用，設(shè)置一次
????init()
????// 監(jiān)聽手機(jī)旋轉(zhuǎn)的事件的時機(jī)，重新設(shè)置
????window.addEventListener('orientationchange', init)
????// 監(jiān)聽手機(jī)窗口變化，重新設(shè)置
????window.addEventListener('resize', init)
理解：上面代碼實(shí)現(xiàn)了，無論設(shè)備可視窗口如何變化，始終設(shè)置rem為width的1/10.即實(shí)現(xiàn)了百分比布局
4、tip：
1、以上代碼需在dom之前寫入（可放在head里面第一個script標(biāo)簽）
????????2、移動端加上meta標(biāo)簽
<metaname="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
5.對于1像素會無法渲染問題
6.vw —— 視口寬度的 1/100；vh —— 視口高度的 1/100 —— MDN
/* rem方案 */
html{fons-size:width/100} p{width:15.625rem}
/* vw方案 */ p{width:15.625vw}
vw還可以和rem方案結(jié)合，這樣計算html字體大小就不需要用js了
html{fons-size:1vw}? /* 1vw = width / 100 */
p{width:15.625rem}
7.字體大小并不能使用rem，字體的大小和字體寬度，并不成線性關(guān)系，所以字體大小不能使用rem；
