postcss-pxtorem仅在构建时将px转为rem，运行时需动态设置html根字体大小才能生效；rootValue必须与运行时基准严格对齐，推荐设为设计稿宽度/10（如750px设计稿设75），并统一运行时计算逻辑。
postcss-pxtorem 本身不负责运行时适配，它只在构建阶段把 px 换成 rem；真正起缩放作用的是运行时动态设置的 html 根字体大小。漏掉这一步，所有 rem 都会按默认 16px 解析，页面直接“炸开”。
postcss-pxtorem 的 rootValue 必须和运行时基准对齐
常见错误是配置 rootValue: 37.5，但运行时用的是 amfe-flexible（它默认按设备宽度 / 10 算），结果 iPhone SE（375px 宽）下根字体是 37.5px，刚好匹配；而 iPhone 12（414px 宽）下根字体变成 41.4px，但 postcss-pxtorem 还是按 37.5 换算的 —— 导致实际尺寸偏大。
- 最稳妥的做法：统一用设计稿宽度 / 10 作为
rootValue，比如 750px 设计稿就设rootValue: 75 - 同时确保运行时脚本也按相同比例计算，例如：
document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 * 75 + 'px' - 如果用了
amfe-flexible，它内部就是按设备宽度 / 10 计算的，所以设计稿为 750px 时，rootValue必须设为75，不能写37.5
哪些样式会被转换？propList 配置决定转换范围
postcss-pxtorem 默认只转部分属性，比如 width、height、padding，但不会动 border 或 font-size，除非你显式声明。
- 推荐配
propList: ['*']，让所有带px的属性都参与转换（包括border、box-shadow） - 若想保留某些
px不转（如 1px 边框），可用exclude排除文件，或加/* no-transform */注释 - 注意：伪元素里的
px（如::before { content: '×'; font-size: 12px; }）也会被转，需检查是否合理
为什么 px 转 rem 后，文字在小屏上还是太小？
根本原因不是转换失败，而是 rem 缩放没有下限 —— 屏幕越窄，根字体越小，1rem 对应的物理像素就越少，文字可能缩到可读性临界点以下。
立即学习“前端免费学习笔记（深入）”；
- 必须加最小字号保护：用
min-width或媒体查询兜底，例如@media (max-width: 320px) { html { font-size: 32px !important; } } - 避免对
font-size单独设rem后再套em，容易叠加缩放失控 - 微信内嵌浏览器对极小字号有强制放大逻辑，但仅限中文，英文/数字仍会糊，不能依赖
exclude 配置不当会导致第三方 UI 库样式错乱
像 Vant、NutUI 这类组件库，源码里大量使用 px，如果你没排除它们的 CSS 文件，postcss-pxtorem 会把组件内部的 px 也转成 rem，而它们的设计逻辑并不基于你的根字体基准。
- 务必在
exclude中加入/node_modules/和具体组件路径，例如exclude: [/node_modules/, /vant/] - 更安全的做法：只对项目自己的
src目录下的样式做转换，其他全部排除 - 如果用了
unplugin-vue-components自动导入组件，也要确认其生成的样式是否被误转
真实适配效果取决于三者咬合：viewport 设置是否正确、postcss-pxtorem 的 rootValue 是否与运行时一致、以及有没有对极端屏幕做兜底。这三个点中任意一个松动，都会导致“看起来转了 rem，但实际还是不对”。
