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

（font size of the root element）是指相对于根元素的字体大小的单位

目前，IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持了rem。即使浏览器不支持rem，就多写一个绝对单位的声明即可，浏览器会忽略用rem设定的字体大小。

（1）首先浏览器的默认字体大小是16px

（2）100%=16px => 6.25%=1px => 62.5%=10px，因为rem是相对于根元素，因此在css的html中全局声明font-size=62.5%，此时的1rem就等于10px，这样一来rem和px之间的换算就比较简单，使用起来更方便

（3）使用JS根据浏览器宽度（或浏览器可视区域宽度（clienWidth））动态设置html的大小

通过JS动态设置根元素的font-size，这样的好处是所有设备分辨率都能兼容适配，淘宝首页目前就是用的JS计算。如果不用JS也是可以做适配的，一般我们在做web app都会先统计自己网站有哪些主流的屏幕设备，然后去针对这些设备去做media query设置也可以实现适配，如：

（4）使用媒体查询设置根元素大小——rem和px在响应式中的应用对比，如：

（5）Rem自适应JS，现在也有封装好的JS供我们直接使用

（6）屏幕适配还有一种简单粗暴的做法，即设置viewport进行缩放

天猫web app的首页就采用过这种方式，以320宽度为基准，进行缩放，最大缩放为320*1.3 = 416，基本缩放到416都就可以兼容iphone6 plus的屏幕了，这个方法简单粗暴，又高效。

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

---