postcss-pxtorem需同时配置rootValue与JS动态设置html font-size,二者必须严格对齐设计稿宽度(如375px对应rootValue:37.5),且propList、mediaQuery、minPixelValue等参数需合理设置,否则尺寸失真或样式异常。

postcss-pxtorem 不会自动适配,必须同时配对 rootValue 和运行时根字号,缺一不可。只改配置不写 JS 设置 html 的 font-size,页面必然错乱。
rootValue 必须和设计稿宽度、JS 计算逻辑严格对齐
它不是“设个数就行”的参数,而是构建时的机械除法基准:rem = px / rootValue。浏览器渲染时再用当前 html { font-size: Xpx } 去解释这个 rem 值。两者不一致,尺寸就失真。
- 设计稿宽 375px → 推荐
rootValue: 37.5(即 1rem = 10px,对应 375 / 37.5 = 10 倍缩放) - 此时 JS 必须设置
document.documentElement.style.fontSize = document.documentElement.clientWidth / 375 * 37.5 + 'px' - 若设计稿是 750px,
rootValue应为75,JS 公式就得同步改成/ 750 * 75 - 别用函数动态读取
window.innerWidth—— 构建时没有window,会报ReferenceError: window is not defined
propList 控制哪些 px 被转,别盲目设 ['*']
默认情况下,border、border-radius、box-shadow 等属性里的 px 是被跳过的,这是有意为之:直接转成 rem 后,在小屏上可能变成 0.02rem,渲染为 0,线条消失或阴影不见。
- 保守推荐:
propList: ['font-size', 'line-height', 'letter-spacing', 'width', 'height', 'padding', 'margin'] - 如果确实要全转,加
propList: ['*'],但务必同步检查第三方 UI 库样式是否崩坏 -
minPixelValue: 2可避免1px边框被转(如需保留物理像素线,这个值很关键)
mediaQuery 设为 false,否则断点行为会混乱
媒体查询里的 px 值(比如 @media (max-width: 768px))如果也被转成 rem,会导致断点触发时机错位 —— 因为 768px 是设备视口宽度,和根字号无关,不能参与 rem 换算。
立即学习“前端免费学习笔记(深入)”;
- 明确设
mediaQuery: false,这是绝大多数项目的合理选择 - 除非你有特殊需求(例如用 rem 写自定义媒体查询逻辑),否则不要开
- 同理,
replace: true更安全,避免生成冗余的 px + rem 双单位(部分老安卓 WebView 对双单位解析异常)
最容易被忽略的是:插件只管转换,不管根字号。哪怕配置全对,只要没在入口 JS 里执行一次 document.documentElement.style.fontSize 设置,并监听 resize 和 orientationchange,rem 就永远按浏览器默认 16px 解析 —— 这不是 bug,是设计使然。


















