自适应布局 — Rem

区别于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