移动端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布局

一般所有浏览器的html根元素font-size:16px

1rem = 16px

所以所有px值都基于它来换算

设计稿px/换算的rem = 16px / 1 ===> 换算的rem= 设计稿px/16px

一般我们拿到的移动端设计稿是基于iphone6的

所以一般以这个确定的屏幕做参考

iphone6的屏幕宽度为375px

所以设置基准rem = 375 /10 =37.5

为啥/10，这个无所谓，只是一个自定义规定，为了让根px不要那么大

除了设置html根元素上的font-size之外，还要配合flexible.js使用

什么是flexible.js？看下源码

参考： http://dwbbb.com/blog/flexible/

https://www.jianshu.com/p/3a07024963d9

其实flexible.js的主要作用是：

1、为html添加data-dpr属性和style属性，style添加font-size作为1rem的基准值。

2、改写meta标签，根据dpr设置设备的缩放比。

rem（root em） 是一个相对单位，类似em单位。

em 是相对于父元素字体大小的倍数，例如： 设置某元素的父元素font-size为 10PX 如果设置该元素的宽度为 10em 那么 就相当于把宽度设置为100px 。

例如：

通过以上案例，我们可以知道em的作用，那么rem 代表的是 root em ，也就是说rem 是相对于根元素的字体大小。而根元素就是html。

例如：

得到的结果为：

通过这个技术，我们就可以让每一个元素都使用rem 单位来定义大小，这样在适配不同移动设备的时候，我们就只要修改html 的font-size 就可以做到让所有的元素都能够进行相应的适配。（比如： 设备屏幕大的时候，就设置html 的font-size 大一些，那么页面中所有的元素的宽、高、字体大小、都能够相应地变大）。

因为em 是相对父元素的，所以如果使用em 进行适配的话，那么就要对每一个父元素都要进行修改，这样做效率会非常低而且也不利于维护。

这个时候我们就需要用到CSS3中的 @media 功能

读者可查看我的另一篇文章。里面有详细介绍了@media功能的使用

https://www.jianshu.com/p/2b564dbfeee1

---