`rem`移动端适配：

在移动端（手机端、Pad端），设备尺寸参差不齐。如果想要写完一套代码，能够在所有移动设备上都正常运行，那么采用原生的px单位来设置是不行的。举个例子：iPhone6的尺寸是375px，如果我们想要一个盒子是占据整个宽度的一半，那么会将这个盒子的宽度设置为187.5px，但是并不是所有手机的宽度都是375px，因此就会造成问题。这时候我们可以通过rem来解决这个问题。

什么是`rem`：

em：当前元素字体大小相对于父标签的字体大小。比如：
```
<div style="font-size:16px;">
    <span style="font-size:2em">你好</span>
</div>
```
在div中字体大小是16px，而在span标签中因为用的是2em，因此是2倍的父标签字体的大小，也就是32px。
rem：跟em类似，只不过此时的参照元素不是父元素，而是根元素，也就是html元素的大小。比如：
```
<html style="font-size:14px">
    <div style="font-size:16px;">
        <span style="font-size:2rem">你好</span>
    </div>
</html>
```
此时的span标签字体大小为html标签字体大小的2倍，也就是28px。

`rem`适配原理：

rem虽然本身是用来设置字体的大小，但是也可以延伸到设置其他属性的尺寸。利用rem我们可以实现等比缩放。比如设计师给的UI设计图是按照750px尺寸的，我们可以给html的font-size为100px，那么以后我想实现一个32px的大小，转化成rem就是0.32rem。这样写是没有问题的，但是如果用户现在的手机不是750px的，而是375px的，这时候直接写个0.32rem不是会有问题吗？目前这样来说是有问题，但是我们只需要设置html的font-size为windowWidth/750*100，在这个公式中将windowWidth换算成375px，结果为50px，那么用0.32rem后的px为16px，正好是750px尺寸的一半，达到了缩小一倍的效果。

在`Vue-cli`中实现`rem`布局：

在使用vue-cli创建的项目中，我们可以通过一些第三方包来方便的实现rem的布局。要安装两个包，分别是：postcss-pxtorem、lib-flexible。安装命令通过npm install --save-dev postcss-pxtorem lib-flexible安装即可。在安装完包后，还需要配置两个地方：

package.json：

"postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-pxtorem": {
        "rootValue": 37.5,
        "propList": [
          "*"
        ],
        "selectorBlackList": [
          "van-*"
        ]
      }
    }
  }

main.js：
```
import "lib-flexible"
```

这样以后在写单位的时候，就不需要换算成rem，直接写px就可以，postcss-pxtorem会自动的将我们写的px转化成rem。而lib-flexible会根据当前的尺寸，来调整html上的font-size进行适配。而其中的37.5则根据设计师设计图的尺寸来，比如设计师是用375px的尺寸来设计的，那么就是375/10。

rem移动端适配：

什么是rem：

rem适配原理：

在Vue-cli中实现rem布局：

`rem`移动端适配：

什么是`rem`：

`rem`适配原理：

在`Vue-cli`中实现`rem`布局：