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