vue3 vite 自适应方案

两种方案：

1 使用 postcss-pxtorem插件

npm install postcss-pxtorem autoprefixer --save-dev #

或 yarn add postcss-pxtorem autoprefixer -D

2、postcss-px-to-viewport

npm install postcss-px-to-viewport --save-dev

或

yarn add postcss-px-to-viewport -D

安装完成后再项目跟目录下新建postcss.config.cjs

module.exports = {
  plugins: {
    // 自动添加浏览器前缀
    autoprefixer: {
      overrideBrowserslist: [
        'Android 4.1',
        'iOS 7.1',
        'Chrome > 31',
        'ff > 31',
        'ie >= 8'
      ]
    },
    // px 转 rem 配置
    // 'postcss-pxtorem': {
    //   rootValue: 75, // 设计稿宽度的 1/10（375px 设计稿对应 37.5）
    //   propList: ['*'], // 需要转换的属性，* 表示所有
    //   unitPrecision: 2, // 转换后的小数位数
    //   selectorBlackList: ['ignore-'], // 忽略带 ignore- 前缀的类
    //   replace: true, // 直接替换 px 而不是添加备用属性
    //   mediaQuery: false, // 不转换媒体查询中的 px
    //   minPixelValue: 1, // 小于 1px 不转换
    //   // exclude: /node_modules/i // 排除 node_modules 目录
    // },
    // px 转 vw vh 配置
    'postcss-px-to-viewport': {
      viewportWidth: 375, // 设计稿的视口宽度（核心配置）
      viewportHeight: 667, // 设计稿的视口高度（可选）
      unitPrecision: 5, // 转换后保留的小数位数
      viewportUnit: 'vw', // 主要转换的单位，可选 vw/vh
      selectorBlackList: ['ignore-'], // 不转换的选择器
      minPixelValue: 1, // 小于等于 1px 不转换
      mediaQuery: false, // 是否转换媒体查询中的 px
      exclude: /node_modules/i, // 排除转换的目录
      include: undefined, // 需要强制转换的目录
      landscape: false, // 是否处理横屏情况
      landscapeUnit: 'vh', // 横屏时使用的单位
      landscapeWidth: 667 // 横屏时的视口宽度
    }
  }
};

以上代码为 rem 和 vw vh 两种方案，大家在开发中任选其中一个就可以

这个两种方案没有办法转换行内样式，

下面我们可以写两个函数将行内样式转换

export const pxToVw=(px, designWidth = 375)=> {
  const vw = (px / designWidth) * 100;
  // 先乘 100000 后四舍五入，再除以 100000 保留5位小数
  const roundedVw = Math.round(vw * 100000) / 100000;
  // 确保即使小数位不足5位也显示5位
  return roundedVw.toLocaleString('en-US', {
    minimumFractionDigits: 5,
    maximumFractionDigits: 5
  }) + 'vw';
}
export function pxToRem(px, rootValue = 75) {
  const rem = px / rootValue;
  // 保留 5 位小数（与 postcss-pxtorem 的 unitPrecision 保持一致）
  const roundedRem = Math.round(rem * 100000) / 100000;
  // 确保显示 5 位小数
  return roundedRem.toLocaleString('en-US', {
    minimumFractionDigits: 5,
    maximumFractionDigits: 5
  }) + 'rem';
}

需要注意的是

pxToVw 的designWidth 参数需要和postcss.config.cjs的viewportWidth 值保持一致

pxToRem的rootValue参数值需要和postcss.config.cjs的 rootValue值保持一致