vue-cli 3.0+vant项目使用postcss-pxtorem和amfe-flexible 进行移动端适配

vue-cli 3.0+vant项目使用postcss-pxtorem和amfe-flexible 进行移动端适配

Rem 适配
Vant 中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具

• postcss-pxtorem 是一款postcss插件，用于将单位转化为rem
• lib-flexible  用于设置rem基准值
  lib-flexible已经废弃会出现很多问题，用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'], // 忽略转换正则匹配项
            propList: ['*']
          })
        ]
      }
    }
  },
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
    } else {
      // 为开发环境修改配置...
    }
  }
}

注意

注意将蓝湖上的设计稿，宽度设置为375px,这样设计稿是100px，程序上直接写100px就可以了