如何通过postcss-pxtorem插件在移动端适配H5页面，实现px到rem的转换？

本文共计1013个文字，预计阅读时间需要5分钟。

postcss-pxtorem 本身不负责运行时的适配配置，它只负责在构建阶段将 px 单位转换为 rem 单位；真正起作用的是运行时动态设置的 根字体大小。忽略这一步，所有 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，但实际还是不对”。