rem与vw移动端布局适配

rem相对相对于浏览器的根元素html大小影响 默认1rem=16px ；需写js文件，比较麻烦
根元素等于=假设设计稿根元素大小100*（设备的宽度/750设计稿）

(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            //js获取当前的设备大小：document.documentElement.clientWidth;
            var clientWidth = docEl.clientWidth;//获取设备的宽度
            if (!clientWidth) return;
            if (clientWidth >= 750) {//宽度>750 平板 或桌面 
                docEl.style.fontSize = '100px';//根元素 
            } else {//移动端的适配 
                //设置：html根元素大小   100设计稿的html大小  750设计稿（根据设计稿变化）
                //测试设计稿大小：测量的值px  px转rem  测量的px/100=?rem  直接css里面写?rem
                docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
            }
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

vw表示的是屏幕宽的1%，屏幕宽是100vw，设计稿为750px时，1px为0.13333vw；
所以可以在html中写

html{font-size:13.33333333vw}
//防止字体过大
   @media (min-width: 750px) {
        html {
          font-size: 100px;
        }
      }

在写入rem时候 实际的像素 直接除100 就等于对应的rem。比如1rem等于设计稿的100px，这样，rem与vw相结合，非常滴房便

备忘录：
px：相对大小 相对于浏览器的分辨率
em: 相对大小 相对于当前的元素设置大小，如果当前的元素没有大小找父元素 受父元素影响