移动端设置rem
<script>
!function(n){//rem
var e=n.document,//document
t=e.documentElement,//body
i=750,//设计稿宽度
d=i/100,//100px=1rem d:代表页面的总宽(rem);750宽度时font-size为100px
o="orientationchange"in n?"orientationchange":"resize",
a=function(){
var n=t.clientWidth||320;n>750&&(n=750); // 750的设计稿
t.style.fontSize=n/d+"px"
};
e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
}(window);
</script>
这种设置就是在>=750屏宽时根节点font-size:100px
<750屏宽时根节点font-size根据750屏的比例缩放
不支持document.documentElement时,屏幕宽度设置为320px,对应的font-size缩放到320的font-size
以上是模仿小米官网的rem设置
。

浙公网安备 33010602011771号