在前端开发中，将 Px (Pixels) 转换为 Rem (Root Em) 是响应式设计的常见需求。

通常情况下，浏览器的默认根字体大小（Root Font Size）是 16px。在这个基准下，\(1\text{rem} = 16\text{px}\)。

Px 转 Rem 对照表 (基准: 16px)

下表列出了常用的像素值及其对应的 Rem 值，方便你快速查阅：

核心计算公式

如果你需要计算表格之外的数值，可以使用以下公式：

\[ \text{Rem} = \frac{\text{目标像素值 (Px)}}{\text{根元素字体大小 (默认为 16)}} \]

例如，若要计算 \(28\text{px}\)：

\[ \frac{28}{16} = 1.75\text{rem} \]

提高开发效率的建议

设置 62.5% 技巧：

在 CSS 中将 html { font-size: 62.5%; }。这样根字体大小就变成了 \(10\text{px}\) (\(16 \times 0.625\))。

好处：计算变得极其简单，只需将 Px 值除以 10 即可（例如\(14\text{px} = 1.4\text{rem}\)）。

使用 CSS 变量：

在根元素定义变量，方便全局调整。

构建工具：

如果你使用 Webpack 或 Vite，可以配置 postcss-pxtorem 插件，这样你只需在代码里写 Px，插件会自动帮你转换成 Rem。