postcss-px2rem px转rem

utils/rem.js

// 基准大小
const baseSize = 14;
// 设置 rem 函数
function setRem() {
  // 当前页面宽度相对于 1920 宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 1920;
  // 设置页面根节点字体大小
  document.documentElement.style.fontSize =
    baseSize * Math.min(scale, 2) + "px";
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function() {
  setRem();
};

main.js 引入

import "@/utils/rem.js";

postcss.config.js

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-pxtorem": {
      rootValue: 14,
      minPixelValue: 12, //px小于12的不会被转换
      propList: ["*"],
      selectorBlackList: ['el-submenu','el-menu','el-table','el-breadcrumb'],  //则是一个对css选择器进行过滤的数组，比如你设置为['fs']，那例如fs-xl类名，里面有关px的样式将不被转换，这里也支持正则写法。
      exclude: /(components|node_modules)/ig, // 不转换的文件
    }
  }
}