本文共 2082 字，大约阅读时间需要 6 分钟。

之前写H5移动端都是使用window.innerWidth 获取视口的宽度，计算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;

转载地址：http://zkhbb.baihongyu.com/