之前写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