移动端项目适配之rem单位自动生成插件postcss-pxtorem（lib-flexible）（最简单明了的教程）

安装amfe-flexible插件

npm i amfe-flexible

在main.js中引入lib-flexible

import 'amfe-flexible'

 注意，这个插件对行内样式无效。

使用postcss-pxtorem插件把px转为rem

安装postcss-pxtorem

npm install postcss-pxtorem -D

在根目录下创建.postcssrc.js 文件 文件，输入以下代码。

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

在根目录下新建一个postcss.config.js文件，输入以下代码（rootValue是设计稿的宽度，按哪个测量就设置哪个,75或37.5）

module.exports = {
  plugins: {
    // postcss-pxtorem 插件的版本需要 >= 5.0.0
    'postcss-pxtorem': {
      rootValue({ file }) {
        return file.indexOf('vant') !== -1 ? 37.5 : 75;
      },
      propList: ['*'],
    },
  },
};

如果报错，执行下面代码

npm i postcss-pxtorem@5.1.1   

重启项目，ok！ 

如有错误，欢迎指出！