CSS使用PostCSS-pxtorem实现rem适配教程

本文深入解析了使用 PostCSS-pxtorem 实现 rem 适配时最常踩的三大坑：插件配置顺序错误或构建工具接入方式不当导致样式未走 PostCSS 流程、rootValue 与 HTML 实际 font-size 不匹配引发换算失真、exclude 和 propList 配置不合理造成误转关键像素值；同时对比了 vw 方案的优劣，指出 pxtorem 在兼容性、稳定性及老项目迁移中仍具独特价值，但其核心难点在于 JS 动态设置根字体大小与构建时转换逻辑的强耦合——一处失效即全局适配崩溃，极具隐蔽性与调试挑战。

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 单文件组件里的