postcss-pxtorem一启用就崩，因其默认全局转换导致border、媒体查询和第三方库样式异常；需精准配置proplist（如仅转字体属性）、selectorblacklist（排除html及.ignore类）、rootvalue（必须与js动态设置的font-size严格一致），并关闭mediaquery、设minpixelvalue≥2、exclude第三方样式。
为什么 postcss-pxtorem 一启用就崩？
不是插件坏了，是它默认把所有 px 都转——border: 1px 变成 border: 0.0267rem，高 DPR 屏幕上直接看不见；@media (max-width: 768px) 被转成 @media (max-width: 20.48rem)，断点彻底失效；第三方 UI 库（比如 .ant-btn）的样式也被误伤。
根本原因在于：插件只做“机械替换”，不理解语义。你得明确告诉它——哪些属性该转、哪些选择器要跳过、哪些文件不该碰。
propList 和 selectorBlackList 怎么配才不翻车？
propList 控制“转什么”，selectorBlackList 控制“在哪不转”。二者配合才能守住底线。
-
propList: ['font', 'font-size', 'line-height', 'letter-spacing']—— 只动字体相关属性，放过padding、margin、border、box-shadow等带像素语义的值 -
selectorBlackList: [/^html$/, /\.ignore/, /\.no-rem/]—— 排除html标签自身（防止根字号被循环转）、含.ignore或.no-rem的类名 - 别用
['*']，除非你全程自己控根字号且所有第三方样式都已隔离
rootValue 设 16 还是 37.5？怎么和 JS 动态根字号对齐？
rootValue 是编译时换算基准，必须和运行时 JS 设置的 document.documentElement.style.fontSize 一致，否则所有 rem 全错位。
常见错误是：配置写了 rootValue: 37.5，但 JS 里却按 750 / 10 = 75 设置根字号，结果所有尺寸缩一半。
- 设计稿宽 750px → 推荐
rootValue: 75，JS 动态设fontSize = document.documentElement.clientWidth / 10 + 'px' - 设计稿宽 375px → 推荐
rootValue: 37.5，JS 设fontSize = document.documentElement.clientWidth / 10 + 'px' - 绝对不要在 JS 里写死
fontSize = '16px'后还配rootValue: 37.5
mediaQuery、minPixelValue、exclude 这三个开关必须关严
它们是防误转的最后防线，漏一个都可能引发连锁问题。
-
mediaQuery: false—— 强制关闭媒体查询里的px转换，否则@media (min-width: 320px)会变成无效的@media (min-width: 8.533rem) -
minPixelValue: 2—— 小于等于 2px 的值不转，避免1px被转成0.0267rem这种渲染无意义的值 -
exclude: /node_modules|lib\/.*\.css/—— 显式排除node_modules和第三方样式文件，防止 Ant Design、Element Plus 等库被污染
真正麻烦的从来不是配置项多，而是每个开关背后都对应一个真实崩掉过的页面。漏掉 exclude，上线后按钮边框消失；忘了关 mediaQuery，H5 活动页在 iPad 上直接错版。这些都不是理论风险，是高频线上事故。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
