移动端自适应——vw

之前写H5移动端都是使用window.innerWidth 获取视口的宽度，计算rem来写样式；
如：
计算rem

/******rem *******/
(function(win){
    var remCalc = {};
    var docEl = win.document.documentElement,
        tid,
        hasRem = true;
    hasZoom = true;
    designWidth = 750;
    function refresh(){
        var width = docEl.getBoundingClientRect().width;
        if(hasRem){
            var rem = width/10;
            docEl.style.fontSize = rem + "px";
            remCalc.rem = rem;
            var actualSize = parseFloat(window.getComputedStyle(document.documentElement)["font-size"]);
            if(actualSize!== rem && actualSize>0 && Math.abs(actualSize-rem)>1){
                var remScaled = rem*rem/actualSize;
                docEl.style.fontSize = remScaled + "px";
            }
        }
        if(hasZoom){
            var style = document.getElementById('y_style');
            if(!style){
                style = document.createElement('style');
                style.id = 'y_style';
            }
            style.innerHTML = '._z{zoom:'+ width/designWidth + '}';
            document.getElementsByTagName('head')[0].appendChild(style);
        }
    }
    function dbcRefresh(){
        clearTimeout(tid);
        tid = setTimeout(refresh,100);
    }
    win.addEventListener("resize",function(){
        dbcRefresh()
    },false);
    win.addEventListener("pageshow",function(e){
        if(e.persisted){
            dbcRefresh()
        }
    },false);
    refresh();
    if(hasRem){
        remCalc.refresh = refresh;
        remCalc.rem2px = function(d){
            var val = parseFloat(d)/this.rem;
            if(typeof d==="string" && d.match(/px$/)){
                val+="rem";
            }
            return val
        };
        win.remCalc = remCalc;
    }
})(window);

css 样式，两倍图，所以除以 75

.loading-img{
      width:24/75rem;
      height:24/75rem;
      margin-bottom: 40/75rem;
    }

现在发现有更好的方法，省去计算rem 的步骤，目前为止发现兼容还不错

使用vw ,即当前视口的总宽度window.innerWidth，如 iphone6/7/8 的宽度为 375px，则100vw 就等于 375px，如果设计图是基于750做的图，一个切出来的图片为 200px*100px, 需要展示的大小 width: 200/7.5vw; height:100/7.5vw;
计算公式： css页面尺寸 = 图片实际尺寸/设计图宽度*100vw