rootvalue必须与运行时html的font-size严格一致，否则px转rem后渲染失真；它仅在构建时按rem=px/rootvalue机械换算，不读取dom，也不支持window相关动态计算。
PostCSS-pxtorem 不会自动适配所有场景，rootValue 配置错，转换结果就全乱——它不是“设了就完事”的黑盒，而是严格按公式 rem = px / rootValue 换算的机械过程。
为什么 rootValue 必须和 HTML 的 font-size 一致？
PostCSS-pxtorem 只做除法，不查 DOM。它把所有 px 值除以你配置的 rootValue，生成 rem；浏览器再用当前根元素的 font-size（即 1rem 对应多少 px）去渲染。两者不匹配，尺寸就失真。
- 你设
rootValue: 37.5，但 JS 或 CSS 里没让html { font-size: 37.5px }，那 100px 就会转成2.666rem，而如果实际1rem = 16px，最终渲染就是2.666 × 16 ≈ 42.7px，远小于预期 - 常见做法是：设计稿宽 750px → 设
rootValue: 75，然后 JS 动态设置document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px'（即 1rem = 屏幕宽 / 10） - 若用 lib-flexible 或手写媒体查询控制
font-size，rootValue必须与那个基准值完全相等，差 0.1 都会导致累积误差
rootValue 支持函数，但别在构建时动态读取屏幕宽度
PostCSS 是构建时运行，无法访问 window.innerWidth。所谓“函数式 rootValue”，只适用于根据文件路径、选择器或属性值做条件转换，不是响应式计算。
- 合法用法：
rootValue: ({ file }) => file.indexOf('legacy') > -1 ? 16 : 37.5（不同目录用不同基准） - 错误写法：
rootValue: () => window.innerWidth / 10→ 构建时报ReferenceError: window is not defined - 想实现“设计稿 750 → 1rem=100px”，就老老实实设
rootValue: 100，再确保运行时html的font-size真的是100px（比如通过meta viewport+ JS 设置）
哪些 px 值默认不被转换？怎么放开？
插件默认跳过 border、border-radius、box-shadow 等属性里的 px，因为直接转 rem 容易导致线条过细或圆角崩坏。
- 常见误操作：写了
border: 1px solid #ccc没变 rem，以为插件失效 —— 其实是默认行为 - 如需强制转换，加配置：
propList: ['*']（全部转），或精确列出：propList: ['font-size', 'border', 'border-radius'] - 慎用
propList: ['*']：box-shadow: 0 2px 4px rgba(0,0,0,.1)里的2px和4px转成 rem 后，在小屏上可能变成0.026rem，渲染为 0，阴影消失 - 推荐保守策略：
propList: ['font-size', 'line-height', 'letter-spacing', 'margin', 'padding', 'width', 'height', 'max-width', 'max-height']
最常被忽略的点：PostCSS-pxtorem 只处理源码中的静态 px 字面量，对 CSS 变量、calc() 内部、JS 注入的内联样式完全无感。别指望它能“智能适配”所有地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
