移动端适配

<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scale=no">
<!--
width=device-width当前屏幕等于设备宽
initial-scale=1.0
-->

<!--

px:绝对单位,不管屏幕大小怎么变化,他都一直固定
rem:
一个css单位,是一个相对单位(相对于html的fontSize大小设置的),
1rem=html的fontSize大小

-->

           宽         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>