vue项目移动端适配rem

最近在写vue的移动端项目，踩了很多坑，记录一下，项目使用rem布局，使用px为单位书写，页面在浏览器渲染的时候自动转换为rem

postcss-pxtorem

1.安装插件，用于将px单位生成rem单位（最好下载5.1.1版本不然会报错）

npm i postcss-pxtorem@5.1.1

2. 然后，在项目根目录创建postcss.config.js

// postcss.config.js

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-pxtorem": {
      rootValue: 37.5, // 75表示750设计稿，37.5表示375设计稿
      propList: ["*"],
    },
  },
};

3.src/rem.js