postcss-pxtorem 并非自动适配黑盒,仅构建时将 px 除以 rootValue 转为 rem;真机渲染正确性完全依赖运行时 html font-size 与 rootValue 严格一致,且 rootValue 必须匹配 JS 动态设置逻辑(如 750px 设计稿对应 75),同时需避开 border 等默认不转换属性、禁用 mediaQuery、排除 node_modules,并确保 JS 在 head 内联执行、监听 resize/orientationchange 且防抖。

postcss-pxtorem 不是“配完就自动适配”的黑盒,它只在构建时做一次除法运算:把所有匹配的 px 值除以你配置的 rootValue,生成 rem。真机上渲染是否正确,完全取决于运行时 html 的 font-size 是否和这个 rootValue 严格一致——差 0.1 都会失真。
rootValue 必须和 JS 设置的 html font-size 完全相等
这是绝大多数线上问题的根源。插件不读 DOM、不查 window.innerWidth,它只机械执行 rem = px / rootValue。
- 如果你用 JS 动态设置
document.documentElement.style.fontSize = clientWidth / 7.5 + 'px'(设计稿宽 750px),那rootValue就必须是75(因为 750 ÷ 10 = 75),不是37.5,更不是7.5 - 如果用了
amfe-flexible,它默认设font-size为deviceWidth / 10,那你的rootValue也得是同源计算结果(比如 iPhone 14 Pro 屏宽 390 → 39px,你就得配rootValue: 39) -
rootValue支持函数,但只能基于文件路径或选择器做条件判断,不能调用window.screen.width—— 构建时根本没 window 对象
哪些 px 默认不转?为什么 border: 1px 没变 rem?
这不是 bug,是插件的默认防护策略。它跳过 border、border-radius、box-shadow 等属性里的 px,因为直接转成 rem 后,在小屏上可能变成 0.026rem,渲染为 0,线条消失或阴影丢失。
- 想强制转换?改
propList:比如propList: ['font-size', 'width', 'height', 'border'],但别写['*'],尤其慎加box-shadow -
minPixelValue: 2可设下限,避免1px被缩成不可见值 -
selectorBlackList: [/^\.hairline/, '.ignore']能按类名或正则排除特定选择器,比全局开闸更安全
mediaQuery: true 是高危配置
设成 true 会让 @media (max-width: 768px) 变成 @media (max-width: 20.48rem)。而 20.48rem 在不同设备上物理宽度完全不同——iPhone SE 和 iPad Pro 渲染出的断点位置天差地别。
立即学习“前端免费学习笔记(深入)”;
- 务必设
mediaQuery: false(默认值) - 媒体查询里的尺寸逻辑,应该由 JS 动态控制根字号,或用纯 CSS 媒体查询单独写断点,不要指望
postcss-pxtorem帮你“智能适配” -
exclude必须加上/node_modules\//,否则 Vant、Element Plus 等 UI 库的内置样式会被二次转换,按钮直接缩成图标大小
JS 动态设置 font-size 的关键细节
很多项目卡在“JS 设置了但没生效”,常见于未内联执行、监听不全或计算依据错误。
- 代码必须放在
<head>最顶部,用<script>内联,避免 FOUC 或样式错乱 - 计算依据用
window.screen.width * window.devicePixelRatio,不是document.documentElement.clientWidth—— 后者受滚动条、缩放、iframe 影响,不稳定 - 必须监听
resize和orientationchange,且加防抖:setTimeout(fn, 100),否则横竖屏切换时fontSize频繁重设导致渲染抖动 -
replace: true是底线配置,设成false会同时保留px和追加rem,CSS 权重混乱,调试时看到两个规则打架
真正难的从来不是配插件,而是让构建时的 rootValue 和运行时的 html { font-size: ... } 在每一台设备、每一次横竖屏切换后,都咬死对齐。漏掉一次监听、算错一个基准,整个页面尺寸就偏移。


















