區(qū)別于em == 父元素的 font-size 大小篇梭，rem == 根元素 html 的 font-size 大小 (一般默認為16px宫盔，即1rem = 16px)庆聘。
因為rem是恒定的追城，所以把rem參與到元素在不同視口的比例計算中逾条，然后動態(tài)操作 html 的字體大小就可以實現(xiàn)自適應布局。rem是目前做移動端適配最多見的方案宴合。
JS計算方法1
// 使用 Javascript 動態(tài)設置 html 的 font-size：
window.addEventListener('resize',function(){
// 獲取視窗寬度
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
//獲取html
let htmlDom = document.getElementsByTagName('html')[0];
htmlDom.style.fontSize = htmlWidth / 10 + 'px'; //求出基準值
})
使用上面的公式后在css怎么使用rem呢焕梅？比如我們拿到一個750px寬度的UI設計稿，那么按照上面的公式計算 1rem = 75px卦洽。設計稿內有個600px * 250px 的 banner 樣式如下
banner {
width: calc (600/75) rem;//在less 或者 sass 中可以直接 600/75rem
height：calc (250/75) rem;
}
JS計算方法2
getRem(640, 100)
window.onresize = function () {
getRem(640, 100)
};
function getRem(pwidth, prem) {
//獲取html元素
var html = document.getElementsByTagName("html")[0];
//獲取視窗寬度
//下面的代碼是為了考慮兼容性
//在IE7贞言、IE8、Firefox中阀蒂，document.body.clientWidth以及 document.body.clientHeightzhi值為0该窗，此時，可以使用 document.documentElement.clientHeight等代替蚤霞。
var oWidth = document.documentElement.clientWidth || document.body.clientWidth;
html.style.fontSize = oWidth / pwidth * prem + "px";
}
上面計算方法 prem 代表 1rem = 100px酗失，所以我們在使用的時候直接將 設計稿的尺寸/100 就可以了。
banner {
width: calc(600/100)rem
}
插件
插件的話可以使用px2rem昧绣、配置設計稿尺寸后规肴，px自動轉換為rem
