vue項目使用Vant框架Rem適配（postcss-pxtorem、lib-flexible ）的安裝使用

1.下載lib-flexible

使用的是vue-cli+webpack，通過npm來安裝的

npm i lib-flexible --save

2.引入lib-flexible

在main.js中引入lib-flexible

import 'lib-flexible/flexible'

3.設置meta標簽

通過meta標簽，設置設備寬度以及縮放比例

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

4.安裝postcss-pxtorem

一款 postcss 插件，用於將單位轉化為 rem

npm install postcss-pxtorem -D

5.配置postcss-pxtorem

在安裝postcss-pxtorem的時候會生成一個文件.postcssrc.js
在根目錄找到.postcssrc.js文件，可以在此配置的基礎上根據項目需求進行修改，如：

module.exports = {
  plugins: {
    //...
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 37.5, //vant-UI的官方根字體大小是37.5
      propList: ['*']
    }
  }
}

注意：在配置 postcss-loader 時，應避免 ignore node_modules 目錄，這會導致 Vant 的樣式無法被編譯

溫馨提示： rootValue這個配置項的數值是多少呢？？？ 通常我們是根據設計圖來定這個值，原因很簡單，便於開發。假如設計圖給的寬度是750，我們通常就會把rootValue設置為75，這樣我們寫樣式時，可以直接按照設計圖標注的寬高來1:1還原開發。（iPhone界面尺寸：320 * 480、640 * 960、640 * 1136、750 * 1334、1080 * 1920等。）
那為什么你在這里寫成了37.5呢？？？
之所以設為37.5，是為了引用像vant、mint-ui這樣的第三方UI框架，因為第三方框架沒有兼容rem，用的是px單位，將rootValue的值設置為設計圖寬度（這里為750px）75的一半，即可以1:1還原vant、mint-ui的組件，否則會樣式會有變化，例如按鈕會變小。
既然設置成了37.5 那么我們必須在寫樣式時，也將值改為設計圖的一半（比如設計稿尺寸是750px，字體大小是22px的話，css的樣式字體大小就寫12px）。

6.當配置完之后，只需要重啟下服務，就自動轉化為rem了

npm run dev 或者 npm run serve