vue 移动端 px 转 rem

1、安装两个依赖

 "postcss-pxtorem": "^5.1.1",
 "amfe-flexible": "^2.2.1",

2、main.js 中引入

 import "amfe-flexible";

3、创建vue.config.js (如果有不需要创建)

const autoprefixer = require("autoprefixer");
const pxtorem = require("postcss-pxtorem");

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          autoprefixer(),
          pxtorem({
            rootValue: 30, //表示根元素html的fontSize值,也可以是100,获取任意其他值
            propList: ['*'], //设置px转换成rem的属性值，*表示所有属性的px转换为rem
          })
        ]
      }
    }
  }
};