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我們可以實現等比縮放。比如我將一個頁面的寬度平均分成100份unit=windowWidth/100，然后讓html的font-size等於unit，那么以下問題都可以實現：
- 要實現瀏覽器一半的寬度，我們就可以通過
50rem來實現（rem是單位）。 - 設置字體大小為
16px，轉化成rem就是：(16/unit)rem。
在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進行適配。