在 vite + vue 中 结合 postcss + postcss-pxtorem + autoprefixer 配置 px 转 rem

1.安装postcsspostcss-pxtoremautoprefixernpm i postcss postcss-pxtorem autoprefixer -D2.在vite.config.js文件平级目录下创建postcss.config.cjs文件添加以下代码// postcss.config.js module.exports { plugins: { autoprefixer: {}, // 可选但推荐用于添加浏览器前缀 postcss-pxtorem: { rootValue: 16, // 设计稿基准字体大小通常为 16px unitPrecision: 5, // 保留小数点后几位 propList: [*], // 需要转换的属性* 表示所有 selectorBlackList: [], // 忽略的选择器 replace: true, // 是否直接替换而不是添加新属性 mediaQuery: false, // 是否转换媒体查询中的 px minPixelValue: 1, // 小于该值的 px 不会被转换 }, }, };3.在vite.config.jscss 中添加以下代码export default defineConfig(() { return { css: { postcss: ./postcss.config.cjs, // 明确指向 .cjs 文件 }, }; });4.创建setRem.js文件添加以下代码/** * 动态设置根元素的字体大小 * param {number} designWidth - 设计稿的宽度 */ function setRem(designWidth) { const docEl document.documentElement; const resizeEvt orientationchange in window ? orientationchange : resize; const recalc () { const clientWidth docEl.clientWidth; if (!clientWidth) return; // 根据设计稿宽度计算根元素字体大小 docEl.style.fontSize 16 * (clientWidth / designWidth) px; }; if (!document.addEventListener) return; window.addEventListener(resizeEvt, recalc, false); document.addEventListener(DOMContentLoaded, recalc, false); } setRem(1920); export default setRem;5.在main.js中引入setRem.js文件并调用setRem函数import ./setRem.js;6.效果图在不同尺寸的设备上查看效果