页面崩了不是插件故障，而是默认将所有px无差别转换，导致border、box-shadow等像素语义属性失真，第三方样式错乱，媒体查询失效；需用propList限定属性、selectorBlackList排除选择器，并确保rootValue与JS动态设置的根字号严格一致。
直接启用 postcss-pxtorem 后页面崩了，不是插件坏了，而是它默认把所有 px 都转——包括 border: 1px、box-shadow: 0 2px 4px、@media (max-width: 768px)，甚至第三方库的样式，全被无差别处理。
为什么 border 和 mediaQuery 里的 px 没变？
这不是 bug，是插件内置的“安全阈值”。它默认跳过 border、border-radius、box-shadow、outline 等属性里的 px 值，因为这些值语义上依赖像素精度（比如 1px 边框在高 DPR 屏上本就该渲染为物理 1px），强行转成 rem 后可能变成 0.0267rem，最终渲染为 0，线条消失。
同理，mediaQuery 默认不转，否则 @media (max-width: 768px) 变成 @media (max-width: 20.48rem)，而运行时根字号波动会导致断点完全失效。
你看到“没变”，其实是插件在帮你兜底。但如果你真需要转某些 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变成无效小数
selectorBlackList 怎么排除第三方组件样式？
这个配置项匹配的是选择器字符串，不是文件路径。它用来整条规则屏蔽，适合处理已知高危区域。
selectorBlackList: [/^html$/, /\.ant-/, /\.van-/, /\.ignore/, /\.no-rem/]-
/^html$/防止 html 标签自身 font-size 被二次转换（比如你 JS 已设font-size: 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 都会失真。
常见错误配对：
- 设计稿宽 750px → JS 用
clientWidth / 7.5 + 'px'→rootValue必须是75（不是 37.5，不是 7.5） - 用了
amfe-flexible→ 它设的是deviceWidth / 10→ 你的rootValue就得按设备宽度动态算（比如 iPhone 14 Pro 390px → 39），或者统一按 375 设计稿配rootValue: 37.5并改 JS 逻辑 -
rootValue支持函数，但只能基于文件路径或选择器判断，不能访问window—— 构建时根本没有浏览器环境
JS 注入要早于任何 CSS 加载，建议内联在 里，并监听 resize 和 pageshow（含缓存恢复场景）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
