Vue3 + Vite 中大屏自适应解决方案插件px转rem记录

安装依赖

pnpm i amfe-flexible autoprefixer postcss postcss-loader postcss-pxtorem

在根目录中创建文件postcss.config.cjs

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 192, // 设计稿宽度除以 10，  开头大写的Px 不转换 => height: 100Px, 内联样式不转换，需要 / 75 转成 rem
      unitPrecision: 2, // 计算结果保留 6 位小数
      selectorBlackList: ['.no-rem', 'no-rem'], // 要忽略的选择器并保留为px。
      propList: ['*'], // 可以从px更改为rem的属性  感叹号开头的不转换
      replace: true, // 转换成 rem 以后，不保留原来的 px 单位属性
      mediaQuery: true, // 允许在媒体查询中转换px。
      minPixelValue: 2 // 设置要替换的最小像素值。
      // exclude: /node_modules/i // 排除 node_modules 文件(node_modules 内文件禁止转换)
    }
  }
}

问题: 1.行内样式使用px无法转化rem,导致有些插件、库使用起来可能效果有所偏差