vue-cli中使用rem完成適配

1. 首先我們要下載插件npm i postcss-px2rem
2. 然后讓我們創(chuàng)建一個新的配置文件postcss.config.js，這個新文件要和vue.config.js同級
   

在此文件中寫入如下配置

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

4. 接下來在utils中創(chuàng)建好我們的rem配置文件
   
   這里面寫上如下代碼，當(dāng)然如果你們公司有不一樣的規(guī)范自己可以按照你的喜好來，為啥要聽他們的（手動狗頭）

/* eslint-disable */
// 基準(zhǔn)大小
const baseSize = 240
// 設(shè)置 rem 函數(shù)
function setRem() {
  // 當(dāng)前頁面寬度相對于 750 寬的縮放比例，可根據(jù)自己需要修改。
  const scale = document.documentElement.clientWidth / 750
  // 設(shè)置頁面根節(jié)點(diǎn)字體大小
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改變窗口大小時重新設(shè)置 rem
window.onresize = function() {
  setRem()
}

5. 最后讓我們來給自己鼓個掌，這下子真的是最后一步了，在main.js中引入你前面創(chuàng)建好的rem.js配置文件
   
   要注意的是，基準(zhǔn)大小需要你結(jié)合自己的項目來修改，不是直接復(fù)制粘貼就真的萬事大吉了，修改的地方就在第四步的baseSize，這個具體數(shù)值就要你自己進(jìn)行計算來填寫了,對了最后的最后記得重啟項目哦。