移动端设置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设置

猜你喜欢

转载自www.cnblogs.com/fqh123/p/12802010.html