直接启用postcss-pxtorem默认配置会导致页面崩塌，因其无差别转换所有px（含border、mediaQuery、第三方样式）；需用propList限定属性、selectorBlackList排除选择器，并确保rootValue与JS动态设置的根字号严格一致。
直接用 postcss-pxtorem 默认配置会崩，不是插件坏了，是它把 border: 1px、@media (max-width: 768px)、第三方组件里的所有 px 都转了，而这些本不该动。
为什么 border 和 mediaQuery 里的 px 没变？
这不是漏转，是插件内置的防护逻辑：默认跳过 border、border-radius、box-shadow、outline、font-size（部分版本）等属性，因为它们依赖物理像素精度；@media 里的 px 也不转，否则断点会随根字号浮动失效。你看到“没变”，其实是它在兜底。
但如果你真要转某些 border（比如设计稿明确要求缩放），得手动加进 propList。
怎么只转 font-size、padding 这类该转的属性？
靠 propList 显式声明，别用 ['*']。它控制的是“哪些 CSS 属性的 px 值参与转换”，不是文件或选择器范围。
立即学习“前端免费学习笔记（深入）”；
-
propList: ['font', 'font-size', 'line-height', 'letter-spacing', 'padding', 'margin']—— 覆盖主要排版与间距 - 避开
border、width、height、top等易出问题的属性，除非你确认业务中必须等比缩放 -
minPixelValue: 2很关键：≤ 2px 的值不转，防止1px变成0.0267rem渲染为 0
怎么排除第三方组件和局部模块？
selectorBlackList 匹配的是选择器字符串，不是路径。它整条规则屏蔽，适合高危区域。
selectorBlackList: [/^html$/, /\.ant-/, /\.van-/, /\.no-rem/, /\.ignore/]-
/^html$/防止标签自身font-size被二次转换（JS 已设37.5px，再转就乱） -
/\.ant-/排除 Ant Design 所有类名，/\.van-/排除 Vant，避免组件库内部px被误转 - 给局部模块加
class="no-rem"或class="ignore"是最轻量的白名单控制方式
rootValue 和 JS 设置的 font-size 必须严格一致
插件只做静态除法：rem = px / rootValue。它不读 DOM、不查屏幕宽、不调用 window.innerWidth。构建时的 rootValue 和运行时 JS 设置的 document.documentElement.style.fontSize 差 0.1 都会失真。
- 若设计稿宽 375px，JS 动态设
fontSize = clientWidth / 375 * 100→rootValue必须是37.5 - 若设计稿宽 750px，JS 用
clientWidth / 7.5→rootValue就得是75，不是37.5 - 如果用了
amfe-flexible，它设的是deviceWidth / 10，那你的rootValue也得按同源逻辑算（如 iPhone 14 Pro 宽 390 →rootValue: 39）
最容易被忽略的是：JS 必须内联在 里执行，并监听 resize 和 orientationchange（iOS 横竖屏切换不触发 resize），且需防抖——否则布局会闪或错位。
