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，這個具體數值就要你自己進行計算來填寫了,對了最后的最后記得重啟項目哦。