区别于em == 父元素的 font-size 大小，rem == 根元素 html 的 font-size 大小 (一般默认为16px，即1rem = 16px)。
因为rem是恒定的，所以把rem参与到元素在不同视口的比例计算中，然后动态操作 html 的字体大小就可以实现自适应布局。rem是目前做移动端适配最多见的方案。
JS计算方法1
// 使用 Javascript 动态设置 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
