rem 移動端適配

時間 2019-11-26

標籤 rem 移動適配欄目無線简体版

原文原文鏈接

`rem`移動端適配：

在移動端（手機端、Pad端），設備尺寸良莠不齊。若是想要寫完一套代碼，可以在全部移動設備上都正常運行，那麼採用原生的px單位來設置是不行的。舉個例子：iPhone6的尺寸是375px，若是咱們想要一個盒子是佔據整個寬度的一半，那麼會將這個盒子的寬度設置爲187.5px，可是並非全部手機的寬度都是375px，所以就會形成問題。這時候咱們能夠經過rem來解決這個問題。css

什麼是`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，那麼如下問題均可以實現：html

要實現瀏覽器一半的寬度，咱們就能夠經過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安裝便可。在安裝完包後，還須要配置兩個地方：vue

package.json：

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