rootvalue必须与js设置的html font-size完全相等，否则px转rem后渲染失真；它仅在构建时按rem=px/rootvalue机械换算，不读取dom，也不支持window相关动态计算。
rootValue 必须和 JS 设置的 html font-size 完全相等
这是所有适配失效的根源。postcss-pxtorem 只做一件事：rem = px / rootValue，它不读 DOM、不查 window.innerWidth、不感知设备真实宽度。构建时就已算死，运行时全靠 HTML 的 font-size 值对齐。
常见错误现象：
-
getComputedStyle(document.documentElement).fontSize返回16px—— 说明 JS 根字号没生效，但 CSS 已按错误rootValue转完 - 横屏后元素错位 —— JS 重设了
font-size，但 rem 值是构建时固定的，无法响应变化
实操建议：
- 若设计稿宽 750px，且 JS 写的是
document.documentElement.style.fontSize = clientWidth / 7.5 + 'px'（即 1rem = 屏宽 ÷ 10），那rootValue必须是75，不是7.5，也不是37.5 - 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—— 其中2px、4px转成 rem 后在 iPhone SE 上可能变成 0 - 需要转换
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、Naive UI、Element Plus）的 CSS 已按自身基准编写，若被 postcss-pxtorem 强制转换，会导致按钮变小、间距崩坏、图标错位等不可控问题。
实操建议：
-
exclude必须显式配置，例如：/node_modules/、/vant/、/naive-ui/ - 路径匹配要精确，避免漏掉子目录（如
node_modules/vant/es） -
replace: true必须为 true，否则生成的 CSS 会保留原始 px 值，造成双单位冲突
最易被忽略的一点：postcss-pxtorem 是构建时工具，它从不“适配”，只做除法；真机表现是否正确，100% 取决于 JS 运行时设置的 font-size 是否与 rootValue 毫厘不差 —— 差 0.1，误差就会在嵌套层级中累积放大。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
