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 设置了但没生效”，常见于未内联执行、监听不全或计算依据错误。
- 代码必须放在
最顶部，用<script></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: ... } 在每一台设备、每一次横竖屏切换后，都咬死对齐。漏掉一次监听、算错一个基准，整个页面尺寸就偏移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
