vue3中利用postcss-pxtorem，把px转成rem，适应不同分辨率的屏幕

1.安装

npm i lib-flexible-computer -S
npm i postcss-pxtorem -S //将代码中px自动转化成对应的rem的一个插件

2.在vue.config.js中适配，以5120*1440分例子

方式1：rootValue:5120/10

在main.js中引入

// 自适应不同分辨率
import "lib-flexible-computer";

方式2：rootValue: 16 * (5120 / 1920)
不需要引入lib-flexible-computer

方式3：rootValue: 16
需要在公共样式中加入,此处会出现滚动条【方法有待验证】

body {
  width: 5120px;
  font-size: 16px;
  // border: 1px solid blue;
}

module.exports = {
  publicPath: "./", //配置项目路径
  outputDir: "dist", //输出目录
  lintOnSave: false, //是否打开eslint
  css: {
    loaderOptions: {
      postcss: {
        postcssOptions: {
          plugins: [
            require("postcss-pxtorem")({
              //这里是配置项，详见官方文档
              rootValue:16, //用于指定根元素的字体大小，以便计算rem单位
              // rootValue:512, //用于指定根元素的字体大小，以便计算rem单位
              // rootValue: 16 * (5120 / 1920), //用于指定根元素的字体大小，以便计算rem单位
              propList: ["*"], // 需要转换的属性，*表示所有属性都需要转换
              exclude: ["node_modules"], //转换的时候排除
              // unitPrecision: 5,
              // selectorBlackList: [], // 需要忽略的选择器，例如['.ignore']表示不转换.ignore类下的样式
              // replace: true,
              // mediaQuery: false,
              // minPixelValue: 2, // 小于2px的样式不进行转换
            }),
          ],
        },
      },
    },
  },
};

注意版本号：

image.png