vue-cli4中配置移動端自適應postcss-pxtorem

vue-cli創建完項目之后安裝amfe-flexible和postcss-pxtorem

 

npm i amfe-flexible -S
npm i postcss-pxtorem -D

amfe-flexible來根據屏幕動態改變根元素font-size，postcss-pxtorem把代碼中px轉為rem;在項目根目錄建vue.config.js

vue.config.js內容：

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require("autoprefixer")({
            // 配置使用 autoprefixer
            overrideBrowserslist: ["last 15 versions"] 
          }),
          require("postcss-pxtorem")({
            rootValue: 75, // 換算的基數
            // 忽略轉換正則匹配項。插件會轉化所有的樣式的px。比如引入了三方UI，也會被轉化。目前我使用 selectorBlackList字段，來過濾
            //如果個別地方不想轉化px。可以簡單的使用大寫的 PX 或 Px 。
            selectorBlackList: ["ig"],
            propList: ["*"],
            exclude: /node_modules/
          })
        ]
      }
    }
  }
};

然后在main.js里引入amfe-flexible

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import 'amfe-flexible'


Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

 

 

注：如果你創建時候選擇了prettier格式化代碼而且編譯器也裝了插件，你的css里不想被轉化的"PX"編譯器會自動幫你轉化為"px"，此時只要在不想轉化前一行加上

/* prettier-ignore */即可

 

示例如下：

 

 轉化后：