postcss-pxtorem仅在构建阶段将px转为rem，真正起作用的是JS动态设置的html根字体大小；rootValue设37.5或75对应375px/750px设计稿除以10的基准值，确保构建转换与运行时缩放严格匹配。
postcss-pxtorem 不是运行时魔法，它只在构建阶段把 CSS 里的 px 按规则替换成 rem。真正起作用的，是你 JS 动态设置的 html 根字体大小。两者缺一不可。
为什么 rootValue 通常设为 37.5 或 75？
这个值不是随便写的，它直接对应设计稿宽度与目标 rem 基准的换算关系：
- 750px 设计稿 →
rootValue: 75（即 1rem = 75px，750 ÷ 10 = 75） - 375px 设计稿 →
rootValue: 37.5（即 1rem = 37.5px，375 ÷ 10 = 37.5） - 值越小，生成的 rem 数字越大（
200px / 37.5 = 5.3333rem），但更贴近人眼对“整数感”的习惯 - 如果 UI 库（如 Vant）本身已按 375px 适配，而你用 75 作基准，会导致组件被缩放两次——尺寸错乱
selectorBlackList 和 propList 怎么配合防误伤？
第三方 UI 库的样式不能全量转 rem，否则边框、圆角、阴影会失真。必须精准控制转换边界：
-
selectorBlackList: ['.van-button', '.van-cell']：匹配到这些类名的整个选择器，所有属性都不转 -
propList: ['width', 'height', 'padding', 'margin', 'font-size']：只转指定属性，避免把border: 1px solid #ccc错转成border: 0.0267rem - 别写
['*']就完事——border、outline、box-shadow这些带像素语义的属性，强制转 rem 后在高 DPR 屏上会变虚、变细甚至消失
为什么加了插件，页面还是没适配？
常见原因不是配置错，而是漏掉了运行时根字体设置逻辑：
立即学习“前端免费学习笔记（深入）”；
- 只装
postcss-pxtorem，不引入lib-flexible或手写setRem.js→ 构建出了 rem，但1rem始终等于默认的 16px，毫无缩放效果 - 用了
lib-flexible，但public/index.html里还留着原始<meta name="viewport">→ 它会和lib-flexible冲突，导致 scale 错乱 -
postcss.config.js放错位置（比如放在src/下）或未被构建工具识别 → 插件根本没执行，CSS 里全是原始px - Vue CLI 项目中，若用的是
vue.config.js，需确保css.loaderOptions.postcss.plugins正确注入，而不是只写在postcss.config.js里
和 postcss-plugin-px2rem 有什么实际区别？
名字像，但行为关键不同，混用会出问题：
-
postcss-pxtorem的rootValue是固定数值，适合统一设计稿基准；postcss-plugin-px2rem的remUnit也是固定值，但部分旧版默认行为更激进（比如默认转border） -
postcss-pxtorem支持mediaQuery: true，允许在媒体查询内转换；postcss-plugin-px2rem旧版本默认关闭，开启需显式配置 - Vant 适配场景下，
postcss-pxtorem的selectorBlackList黑名单机制更直观，而postcss-plugin-px2rem依赖exclude正则，对 node_modules 路径处理稍繁琐 - 注意：npm 包名是
postcss-pxtorem（结尾是rem），不是pxtorem或pxToRem——拼错就白装
最易被忽略的一点：rem 适配本质是「设计稿尺寸 → 构建时单位转换 → 运行时根字体动态调整」三段链条。断掉任何一环，都会表现为“写了 px 却没缩放”或“缩放了但 UI 库变形”。检查时优先确认 html 元素的 font-size 是否随屏幕宽度变化，再回头查构建输出的 CSS 里是否真出现了 rem。
