Vue项目中px自动转rem实现响应式布局

本文主要讲述在vue2（2.5.16）的版本基础上实现px向rem自动转化的方法，实现vue页面在不同终端（包含手机、Pad等）的响应式布局问题。

1、安装amfe-flexible和postcss-px2rem

npm i amfe-flexible@2.2.1 -S
npm i postcss-pxtorem@5.1.1 -D

2、修改全局配置

1）修改mian.js

引入 amfe-flexible

// 计算响应式
import 'amfe-flexible'

2）修改 postcss.config.js

若没有postcss.config.js，则在根目录下新建

module.exports = {
  "plugins": {
    // to edit target browsers: use "browserslist" field in package.json
    "postcss-import": {},
    "autoprefixer": {
      browsers: ['Android >= 4.0', 'iOS >= 8']
    },
    "postcss-pxtorem": {
      rootValue: 200, //按UI设计稿宽度的10%填写，这里按设计稿2000px填写
      propList: ['*'],
      selectorBlackList: ['van']
    }
  }
} 

3、注意事项

1. 按上面的步骤操作之后，运行项目，会自动将vue文件中的css(style标签中或者css文件中)的px转换城rem；
2. 千万不能将css样式内嵌在html元素中，这样不能将标签内嵌样式中的px转换成rem。