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/vhselectorBlackList: ['ignore-'], // 不转换的选择器minPixelValue: 1, // 小于等于 1px 不转换mediaQuery: false, // 是否转换媒体查询中的 pxexclude: /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值保持一致