1.安装postcsspostcss-pxtoremautoprefixer：
npm i postcss postcss-pxtorem autoprefixer -D
2.在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.效果图：
![]()
![]()
