配置rem

步骤
1. 安装手淘的flexible，插件名称amfe-flexible

npm i amfe-flexible --save-dev
npm i postcss-pxtorem

2. 在main.js导入，如下图：

`import 'amfe-flexible'
import "postcss-pxtorem" `

image.png

3.在html中导入以下代码， 自适应的适配口，如图
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

image.png

4.在/vue.config.js添加px2rem插件,把项目中的px转为rem\

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

module.exports = {
  // 关闭eslint检查
  lintOnSave: false,
  // 配置css前缀,px转rem
  css: {
    loaderOptions: {
        // 后处理器配置
      postcss: {
        plugins: [
          // 配置样式前缀
          autoprefixer(),
          // 把px转为rem
          pxtorem({
            rootValue: 37.5,
            propList: ["*"]
          })
        ]
      }
    }
  }
};

image.png