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

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布局

px: 绝对字体大小

em: 基于一个基数来计算出相对字体大小。(移动端用的少)

rem: 基于根节点（html）的字体大小来计算。

vw: 可视区宽度单位。1vw等于可视区宽度的百分之一。

跟字体大小有关

l浏览器默认字体是16px,这里父级字体大小是20px,所以#box里的1em = 20px即#box是一个长宽均为400px的正方形

vw单位和百分比很相似，不同的是vw的值对所有的元素都一样， 与他们父元素或父元素的宽度无关

以414宽度的屏幕为例

做一个200 * 200的盒子

rem 的字体大小直接与html的字体大小有关。默认是16px = 1rem

我们可以给html设置10px的字体大小

大多数浏览器（不包括ie8以下）都支持rem单位，如果想都支持，可以

可是这样在实际开发中，换算起来非常麻烦，所以，我们对此进行了修改，根据手机屏幕的大小，做了自适应。

首先，我们在html的head里边设置html的font-size.

然后根据设计图的尺寸和手机屏幕的尺寸进行换算。

---