vue-cli 3.0+vant項目使用postcss-pxtorem和amfe-flexible 進行移動端適配

Rem 適配
Vant 中的樣式默認(rèn)使用px作為單位，如果需要使用rem單位，推薦使用以下兩個工具

• postcss-pxtorem?是一款postcss插件，用于將單位轉(zhuǎn)化為rem
• lib-flexible? 用于設(shè)置rem基準(zhǔn)值
  lib-flexible已經(jīng)廢棄會出現(xiàn)很多問題，用amfe-flexible進行替代

[TOC]

步驟

1. 安裝postcss-pxtorem

$ npm install postcss-pxtorem --save-dev

2. 安裝amf-flexible

$ npm i -S  amfe-flexible

3.在main.js中引入amfe-flexible

$ import 'amfe-flexible'

4. 在vue.config.js中進行配置

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({ // 把px單位換算成rem單位
            rootValue: 37.5, // vant官方使用的是37.5
            selectorBlackList: ['vant', 'mu'], // 忽略轉(zhuǎn)換正則匹配項
            propList: ['*']
          })
        ]
      }
    }
  },
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 為生產(chǎn)環(huán)境修改配置...
    } else {
      // 為開發(fā)環(huán)境修改配置...
    }
  }
}

注意

注意將藍(lán)湖上的設(shè)計稿，寬度設(shè)置為375px,這樣設(shè)計稿是100px，程序上直接寫100px就可以了