vue:将px轉化為rem，适配移動端vant-UI等架構(postcss-pxtorem)

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 那麼我們必須在寫樣式時，也将值改為設計圖的一半。

6.當配置完之後，隻需要重新開機下服務，就自動轉化為rem了

npm run dev
           

拓展

px轉rem不僅可以用postcss-pxtorem，同時還有px2rem-loader，隻是配置不一樣，詳見下方連結

vue：将px轉化為rem，适配移動端vant-UI等架構（px2rem-loader）