px2rem适配方案，实现平滑适配

在移动端开发时候，为了解决不同的机型适配问题。我们常常会用mediaQue(媒体查询)依据每种机型写多套适配代码。这种方法固然能解决适配问题，但是mediaQue(媒体查询)代码量太多了，不美观，且不利于维护，而rem可以解决上述的问题。
rem的核心在于通过动态设置根元素（html）的font-size来实现rem大小的变化。我们知道浏览器的默认的font-size是16px,(有些浏览器例外)，也就是1rem = 16px, 16px = 1rem。

用法一：当可视区域大于设计稿所提供的宽度时，将文档宽度固定为设计稿宽度。

(function (doc, win,design_width) {
  var docEl = doc.documentElement,//获取文档节点
//   判断手机是横屏还是竖屏
// orientationchange 事件是在用户水平或者垂直翻转设备（即方向发生变化）时触发的事件。
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
        //获取文档的宽度，clientWidth= width+左右padding
        var clientWidth = docEl.clientWidth;
        //如果文档宽度获取失败, 直接返回
        if (!clientWidth) return;
        if(clientWidth >= design_width){
            //文档宽度大于图纸宽度时，文档宽度等于图纸宽度
            docEl.style.fontSize = '100px';
      }else{
        //文档宽度小于图纸宽度，动态设置html字体大小
        docEl.style.fontSize = 100  * (clientWidth / design_width) + 'px';
      }
    };
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window,750);

用法二:不考虑可视区域的大小，文档宽度为100%

(function (doc, win,design_width) {
  var docEl = doc.documentElement,//获取文档节点
//   判断手机是横屏还是竖屏
// orientationchange 事件是在用户水平或者垂直翻转设备（即方向发生变化）时触发的事件。
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
        //获取文档的宽度，clientWidth= width+左右padding
        var clientWidth = docEl.clientWidth;
        //如果文档宽度获取失败, 直接返回
        if (!clientWidth) return;
        //动态设置html字体大小
        docEl.style.fontSize = 100  * (clientWidth / design_width) + 'px';
    };
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window,750);

使用方法：

写样式时ui图所量宽度为750px,rem布局中为7.5rem（也就是说 750 / 100=7.5rem）
如： .wraps{ width: 7.5m; height: 5rem; font-size: .16rem; margin: 0 auto; text-align: center; color: #fff; }