vue项目中px自动转换为rem

rem.js

// rem等比适配配置文件
// 基准大小
const baseSize = 100;
// 设置 rem 函数
export function setRem() {
// 当前页面宽度相对于 宽的缩放比例，可根据自己需要修改。
constscale = document.documentElement.clientWidth / 1920;
// 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
consthtmlFontsize = baseSize * Math.min(scale, 2);
document.documentElement.style.fontSize = htmlFontsize + "px";
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem();
};

在main.js引入rem.js

安装插件

cnpm install postcss-pxtorem -D

在 Vue 项目src下创建文件postcss.config.js 并写入：

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-pxtorem": {
      rootValue: 100, // 基准大小 1rem = 100px
      propList: ["*"],
      selectorBlackList: ["el-","van-"],//如果是elementui 或者 vantui 则不转rem
    },
  },
};

重启项目单位使用px即可 若不转rem的地方比如字体 px 写为Px 、pX 或者 PX即可