移动端rem单位适配使用

1.适配方法

//缩放比例
!function(e,t){function i(){o=1,e.devicePixelRatioValue=o,s=1/o;
var t=a.createElement("meta");
if(t.setAttribute("name","viewport"),t.setAttribute("content","initial-scale="+s+", maximum-scale="+s+", minimum-scale="+s+", user-scalable=no"),d.firstElementChild)d.firstElementChild.appendChild(t);
else{var i=a.createElement("div");
i.appendChild(t),a.write(i.innerHTML)}}function n(){var e=Math.min(d.getBoundingClientRect().width,750);r=100*e/t.desinWidth,d.style.fontSize=r+"px"}var a=e.document,d=a.documentElement,o=(e.devicePixelRatio,1),s=1;i();var l,r=100;
t.desinWidth=640,t.baseFont=18,t.init=function(){e.addEventListener("resize",function(){clearTimeout(l),l=setTimeout(n,300)},!1),e.addEventListener("pageshow",function(e){e.persisted&&(clearTimeout(l),l=setTimeout(n,300))},!1),"complete"===a.readyState?a.body.style.fontSize=t.baseFont*o+"px":a.addEventListener("DOMContentLoaded",function(){a.body.style.fontSize=t.baseFont*o+"px"},!1),n(),d.setAttribute("data-dpr",o)}}(window,window.adaptive||(window.adaptive={}));
window['adaptive'].desinWidth = 750;
window['adaptive'].baseFont = 18;
window['adaptive'].init();

 

2.rem中border中的1px样式

使用sass的写法

@mixin border-1px($cl,$position){
position: relative;
border:none;
&:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 200%;
height: 200%;
#{$position}: 1px solid $cl;
transform-origin: 0 0;
transform: scale(0.5, 0.5);
box-sizing: border-box;
pointer-events: none;
}

}

css写法

/*border*/
.border-bottom-1px{
position: relative;
border:none;
}
.border-bottom-1px:before{
content: '';
position: absolute;
left: 0;
top: 0;
width: 200%;
height: 200%;
border-bottom: 1px solid #e9edf5;
transform-origin: 0 0;
transform: scale(0.5, 0.5);
box-sizing: border-box;
pointer-events: none
}
.border-top-1px{
position: relative;
border:none;
}
.border-top-1px:before{
content: '';
position: absolute;
left: 0;
top: 0;
width: 200%;
height: 200%;
border-top: 1px solid #e9edf5;
transform-origin: 0 0;
transform: scale(0.5, 0.5);
box-sizing: border-box;
pointer-events: none
}
.border-left-1px{
position: relative;
border:none;
}
.border-left-1px:before{
content: '';
position: absolute;
left: 0;
top: 0;
width: 200%;
height: 200%;
border-left: 1px solid #e9edf5;
transform-origin: 0 0;
transform: scale(0.5, 0.5);
box-sizing: border-box;
pointer-events: none
}

3.各别情况需要计算rem时使用window.innerWidth/750*105进行适配计算！！！！