在項(xiàng)目中為了屏幕適配，經(jīng)常會(huì)用到rem，postcss-px2rem就是為了讓我們直接在將代碼中px自動(dòng)轉(zhuǎn)化成對(duì)應(yīng)的rem的一個(gè)插件

如何使用：

1.安裝

npm i postcss-px2rem --save-dev

2.設(shè)置vue.config.js

css: {
    // 啟用 CSS modules
    modules: false,
    // 是否使用css分離插件
    extract: true,
    // 開(kāi)啟 CSS source maps?
    sourceMap: false,
    // css預(yù)設(shè)器配置項(xiàng)
    loaderOptions: {
      // 導(dǎo)入scss變量
      scss: {
      //  prependData: `@import "@/assets/variable.scss";`
      },
      postcss: {
        plugins: [
          //remUnit這個(gè)配置項(xiàng)的數(shù)值是多少呢？？？ 通常我們是根據(jù)設(shè)計(jì)圖來(lái)定這個(gè)值，原因很簡(jiǎn)單，便于開(kāi)發(fā)。
          //假如設(shè)計(jì)圖給的寬度是750，我們通常就會(huì)把remUnit設(shè)置為75，這樣我們寫(xiě)樣式時(shí)，可以直接按照設(shè)計(jì)圖標(biāo)注的寬高來(lái)1:1還原開(kāi)發(fā)。
          require('postcss-px2rem')({remUnit: 16}), // 換算的基數(shù)
        ]
      }
    }
  },

3.轉(zhuǎn)換的rem是根據(jù)html根節(jié)點(diǎn)fontSize轉(zhuǎn)換的。要想隨窗口自適應(yīng)，就要?jiǎng)討B(tài)根節(jié)點(diǎn)字體大小

public目錄下創(chuàng)建rem.js

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

main.js中使用

(function() {
  var rem = document.createElement("script");
  rem.src = "./rem.js";
  document.body.appendChild(rem);
})();