PostCSS-pxtorem 没生效主因是插件顺序错误、构建工具配置位置不对或样式未走 PostCSS 流程；rootValue 必须与 HTML 实际 font-size 严格对应；需合理配置 exclude 和 propList 控制转换范围。
PostCSS-pxtorem 为什么没生效？检查这三处
插件不工作，90% 是因为配置位置或时机错了。它必须在 PostCSS 插件链里、且在 postcss-preset-env 或 autoprefixer 之后运行（否则某些声明可能已被处理或丢弃）。
-
postcss.config.js中插件顺序写反了：把postcss-pxtorem放最前或夹在中间但没注意依赖关系 - 项目用了 Vue CLI / Create React App 等封装工具，直接改
postcss.config.js不生效——得通过vue.config.js的css.loaderOptions.postcss.plugins或 CRA 的craco注入 - 样式文件没被 PostCSS 处理：比如
.vue单文件组件里的<style scoped></style>没问题，但内联style标签或 JS 里动态插入的 CSS 不走 PostCSS 流程
rootValue 取多少？别硬套 75 或 37.5
rootValue 决定 1rem 等于多少 px，但它不是设计稿宽度除以 10，而是和 HTML 的 font-size 实际值严格对应。你设了 rootValue: 37.5，就得确保页面 真的生效，否则转换结果全是错的。
- 常见做法是用 JS 动态设置：
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px'（以 375px 设计稿为基准） - 如果设计稿是 750px，
rootValue应设为75，JS 里也得同步改成/ 10→/ 7.5，否则换算比例翻倍 - Vite 项目要注意：开发时 HMR 可能导致 JS 设置 font-size 被重置，建议加防抖或监听
resize后强制重设
哪些 px 值不会被转？看 exclude 和 propList 配置
默认情况下，postcss-pxtorem 会把所有属性里的 px 都转，但边框、字体、阴影等常需保留物理像素感，必须靠配置过滤。
-
exclude接正则，匹配文件路径：比如/node_modules/或/src/assets/下的 CSS 不处理 -
propList控制哪些 CSS 属性参与转换：['*']全开，['font', 'font-size']只转字体相关，['!border']排除所有带 border 的属性（注意要加!） - 特别注意
border：设成['border']会转border: 1px solid #000里的 1px，但通常你只想留border-width，所以更稳妥的是['*','!border']+ 单独写border-width: 1px
vw 替代方案兴起后，pxtorem 还值得用吗？
现在主流做法其实是用 viewport + vw（如 font-size: 3.75vw），完全避开 JS 计算和 PostCSS 构建环节。但 pxtorem 在老项目、需要精确控制根字号、或兼容 iOS Safari 旧版本时仍有不可替代性。
立即学习“前端免费学习笔记（深入）”；
- IOS Safari vh/vw 支持不稳定，滚动时视口高度会变，导致布局跳动
- pxtorem 的 rem 值是静态计算的，构建时就确定，运行时无 JS 开销；而 vw 方案依赖视口实时计算，某些动画场景下可能有微小延迟
- 混合使用风险：同一项目里既用 pxtorem 又手动写 vw，容易在媒体查询或嵌套组件中产生单位混乱，调试成本陡增
真正麻烦的从来不是配置本身，而是 rem 值和 JS 动态 font-size 的耦合点——只要有一处 JS 没执行、执行晚了、或被其他库覆盖，整个适配就断在那儿，而且很难定位。
