技術標籤：js rem 轉px

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

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 的樣式無法被編譯

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

npm run dev