如何通过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 换算的 —— 导致实际尺寸偏大。
本文共计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 换算的 —— 导致实际尺寸偏大。