移动端rem自适应布局-最简单易懂的两种方法

Posted 2023-03-12

参考技术A em 是个相对单位，等于该元素或父元素的font-size值；

rem:  root  1rem等于根元素的font-size值

Vw（宽）、vh： 把屏幕分为100份，1vw等于屏幕的1%

1、给文件根元素设置font-size值（会影响字体，但可以解决）

 <script>

 //以iphone6为例，尺寸375，此时font-size=100px。便于计算

       var fonsiz=document.documentElement.clientWidth/3.75; 

        document.documentElement.style.fontSize=fonsiz+"px";

    </script>

2、给html设置rem布局后，需要给body重新设font-size，不然很难处理正常的尺寸

 body 

            font-size: 16px;

        

3、vscode 安装 px to rem 插件，设置其扩展设置的值为100

4、选中需要把px改为rem单位的css样式，alt+z更换为rem布局

1、安装px to rem插件设置100px转换，如上图3，100px=26.667vw=100/3.75，给html标签设置vw

   html 

            font-size: 26.66667vw;

        

2、选中需要把px改为rem单位的css样式，alt+z更换为rem布局