vue中使用rem,结合postcss-pxtorem和amfe-flexible实现移动端适配

1.安装
npm install postcss-pxtorem --save-dev
npm install amfe-flexible --save

2.在main.js中引入
import 'amfe-flexible';

3.在.postcssrc.js 中配置 (vue-cli3.0 的版本在postcss.config.js中配置)

module.exports = {
  "plugins": {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}


//在脚手架为4.0下,不会生成postcssrc.js文件,可以在根目录下新建一个vue.config.js文件
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({
            rootValue: 37.5,
            propList: ['*']
          })
        ]
      }
    }
  },
  lintOnSave: false,//关闭代码验证报错提醒
}

https://blog.csdn.net/lander_xiong/article/details/89704777

你可能感兴趣的:(vue中使用rem,结合postcss-pxtorem和amfe-flexible实现移动端适配)