移动端适配

<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scale=no">


           宽         html fontSize    css       box
设计稿     640        100px            1rem      1*100px
设备1      320        50px             1rem      1*50px
设备2      375        375*100/640px    1rem      1*375*100/640
设备3      414        414*100/640px    1rem
 
  
<script type="text/javascript">
    //在PC端加在 window.onresize事件中,因为PC端可以改变浏览器大小,只要浏览器窗口发生改变就可以重新计算
    window.οnresize=function () {
        var W=document.documentElement.clientWidth||document.body.clientWidth;
        var dW=640;//设计稿的宽
        document.documentElement.style.fontSize=W*100/dW+"px";
    }
script>



 
  

 
  

 
  

你可能感兴趣的:(移动端)