執(zhí)行命令 安裝插件postcss-pxtorem

npm install postcss-pxtorem -D

postcss.config.js 新建package.json同一個(gè)目錄下，文件內(nèi)容如下

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 375,//結(jié)果為：設(shè)計(jì)稿元素尺寸/32(一般750px的設(shè)計(jì)稿的根元素大小設(shè)置32)，比如元素寬320px,最終頁面會(huì)換算成 10rem
      propList: ['*'], //屬性的選擇器，*表示通用
      selectorBlackList:[]    忽略的選擇器   .ig-  表示 .ig- 開頭的都不會(huì)轉(zhuǎn)換
    }
  }
}

postcss.config.js此文件配置完成后需要重啟項(xiàng)目生效

在根目錄src中新建util目錄下新建rem.js等比適配文件

// rem等比適配配置文件
// 基準(zhǔn)大小
const baseSize = 375 // 注意此值要與 postcss.config.js 文件中的 rootValue保持一致
// 設(shè)置 rem 函數(shù)
function setRem () {
  // 當(dāng)前頁面寬度相對于 375寬的縮放比例，可根據(jù)自己需要修改,一般設(shè)計(jì)稿都是寬750(圖方便可以拿到設(shè)計(jì)圖后改過來)。
  const scale = document.documentElement.clientWidth / 375
  // 設(shè)置頁面根節(jié)點(diǎn)字體大?。ā癕ath.min(scale, 2)” 指最高放大比例為2，可根據(jù)實(shí)際業(yè)務(wù)需求調(diào)整）
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改變窗口大小時(shí)重新設(shè)置 rem
window.onresize = function () {
  setRem()
}

在 main.js中引入 rem.js 文件，然后啟動(dòng)項(xiàng)目

image.png