rootvalue必须与js设置的html font-size完全相等；postcss-pxtorem仅执行rem=px/rootvalue计算，不感知环境；js应基于screen.width×devicepixelratio计算font-size，并内联执行、防抖监听；1px等小值默认不转以避免归零；mediaquery必须设为false以防断点失效；exclude需排除node_modules及ui库路径；replace必须为true。
rootValue 必须和 JS 设置的 html font-size 完全相等
这是所有问题的起点。postcss-pxtorem 只做一件事：rem = px / rootValue，它不读 DOM、不查 window.innerWidth、不感知真机环境。如果你 JS 里写的是 document.documentElement.style.fontSize = clientWidth / 7.5 + 'px'（对应 750px 设计稿），那 rootValue 就必须是 75，不是 7.5，也不是 37.5。
常见错误现象：
- 页面整体变小或拉伸，但控制台没报错
-
getComputedStyle(document.documentElement).fontSize返回16px—— 说明 JS 没生效，而 CSS 已按错误rootValue转完 - 横屏后元素错位，因为 orientationchange 时 JS 重设了 font-size，但 rem 值仍是构建时算死的
实操建议：
- JS 计算必须基于
window.screen.width * window.devicePixelRatio，而非clientWidth（后者受滚动条、缩放、iframe 影响） - 在
内联执行 JS，避免 FOUC 和基准错位 - 监听
resize和orientationchange，并用setTimeout(fn, 100)防抖，防止频繁重设
哪些 px 默认不转？怎么安全放开？
border: 1px、border-radius: 4px、box-shadow: 0 2px 4px 里的 px 不会转 rem，这不是 bug，是插件默认防护：小屏下 1px / 75 ≈ 0.013rem，渲染可能直接归零。
实操建议：
- 别一上来就配
propList: ['*']，尤其慎加box-shadow - 需要转换 border？明确写
propList: ['font-size', 'width', 'height', 'border', 'border-radius'] - 用
minPixelValue: 2拦住 1px 级别转换，避免线条消失 - 排除特定类名：
selectorBlackList: [/^\.hairline/, '.ignore']，比全局开闸更可控
mediaQuery: true 是高危配置
设成 true 后，@media (max-width: 768px) 会变成 @media (max-width: 20.48rem)。而 20.48rem 在 iPhone SE（375px 屏宽）上约 768px，在 iPad Pro（1024px）上却接近 2099px —— 断点彻底失效。
实操建议：
- 务必保持
mediaQuery: false（默认值） - 媒体查询逻辑应由 JS 动态控制根字号，或单独用 px 写断点（如
@media (max-width: 768px)） - 不要指望 postcss-pxtorem “智能适配” viewport 变化
exclude 必须排除 node_modules 和 UI 库路径
UI 组件库（如 Vant、Element Plus）内部已做适配，若被二次转 rem，按钮可能缩成图标大小，表单控件错乱。
实操建议：
-
exclude: [/node_modules/, /\/vant\//, /\/element-plus\//]必加 - 路径正则要写全，比如
/\/vant\//比/vant/更安全，避免误伤文件名含 vant 的自定义组件 -
replace: true是底线——设为false会保留原 px 并追加 rem，导致样式权重混乱、调试困难
真正难的不是配置插件，而是让构建时的 rootValue 和运行时的 html { font-size } 在每一台设备、每一次横竖屏切换、每一次缩放后，都咬合得严丝合缝。差 0.1px，失真就开始累积。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
