vue-cli中使用rem完成适配，让移动端快乐起来~~

vue-cli中使用rem完成适配

1. 首先我们要下载插件npm i postcss-px2rem
2. 然后让我们创建一个新的配置文件postcss.config.js，这个新文件要和vue.config.js同级
   

在此文件中写入如下配置

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

4. 接下来在utils中创建好我们的rem配置文件
   
   这里面写上如下代码，当然如果你们公司有不一样的规范自己可以按照你的喜好来，为啥要听他们的（手动狗头）

/* eslint-disable */
// 基准大小
const baseSize = 240
// 设置 rem 函数
function setRem() {
  // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 750
  // 设置页面根节点字体大小
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function() {
  setRem()
}

5. 最后让我们来给自己鼓个掌，这下子真的是最后一步了，在main.js中引入你前面创建好的rem.js配置文件
   
   要注意的是，基准大小需要你结合自己的项目来修改，不是直接复制粘贴就真的万事大吉了，修改的地方就在第四步的baseSize，这个具体数值就要你自己进行计算来填写了,对了最后的最后记得重启项目哦。