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 * 113六、750 * 133四、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

 

原文出處：https://www.cnblogs.com/wangjae/p/12508495.html