REM 转 PX 转换器

PX 转 REM 公式

px = rem * 根字体大小

要将 rem 转换为像素 (px)，请将 rem 值乘以根字体大小。

下表显示了基于默认浏览器根字体大小 16px 的常见 rem 转 px 转换。在将 rem 值转换为可扩展的 px 单位时，可用作快速参考。

为什么使用 REM 而不是 PX？

REM 单位在现代设计系统中被广泛使用，但设计师和 QA 工程师仍然以像素为思维方式。通过将 rem 转换为 px，您可以快速查看在给定根字体大小下文本、按钮或间距的大小，并确保它们与设计规范相匹配。

当用户调整浏览器的默认字体大小以提高可读性时，定义为 rem 的测量值会自动适应，而固定的像素值则不会。这会导致更好的可访问性和更灵活的布局。

• 改善可访问性: 对于具有自定义字体大小设置的用户自动调整大小。
• 一致的缩放: 间距、排版和 UI 元素保持成比例。
• 响应式设计: 在不同屏幕尺寸之间更易于维护。
• 更简洁的代码: 在您的 CSS 中更少的固定像素值。

使用 REM 的最佳实践

使用 <code>rem</code> 单位有助于在您的 CSS 中保持可扩展和一致的排版和间距。以下是现代前端开发中使用 rem 的最可靠最佳实践。

• 设置明确的根字体大小: 保持默认的 16px，或仅在您的设计系统需要特定比例时覆盖它。
• 对排版使用 rem: 以 rem 定义的字体大小在用户调整浏览器设置时会自动缩放。
• 对间距使用 rem: 当它们共享相同的根时，边距、内边距和间隙保持成比例。
• 避免无理由混合 px 和 rem: 不一致的单位使缩放更难以预测。
• 仅对小例外使用 px: 边框、细线元素或像素完美对齐。
• 避免以百分比设置根字体大小以强制 10px: 经典的 62.5% 技巧增加了复杂性，并可能破坏可访问性期望。
• 使用浏览器缩放和自定义字体大小进行测试: 这确保您的布局对所有用户保持可读。

遵循这些最佳实践可以使您的设计可预测、可访问，并在断点和设备之间更易于维护。

REM 在 CSS 中的工作原理

rem 单位基于根元素的字体大小，即 html 标签。与依赖于其父元素字体大小的 em 不同，rem 始终使用单一的参考值。这使得它在整个布局中可预测且易于缩放。

例如，如果根字体大小为 16px，则：

1rem = 16px

当您使用 rem 单位定义间距或排版时，浏览器通过将 rem 值乘以根字体大小来计算最终的像素值。这在渲染过程中布局时发生。

• 根控制: 所有 rem 值使用在 <code>html</code> 元素上设置的字体大小作为其参考。
• 尊重用户设置: 如果用户为了可访问性增加浏览器默认字体大小，所有基于 rem 的值会自动缩放。
• 不受父元素影响: rem 在深度嵌套的组件中保持不变，而 em 则不然。
• 易于全局缩放: 更改根字体大小会调整整个设计系统，而无需编辑多个组件。

简而言之，rem 为 CSS 中的尺寸提供了单一的真实来源，这就是它在大多数现代设计系统和 UI 框架中使用的原因。

如何使用 REM

在您的项目中使用 <code>rem</code> 单位非常简单。主要思想是定义一个明确的根字体大小，然后在排版、间距和布局元素中一致地使用 rem。这使您的整个设计保持可扩展和可预测。

1. 设置根字体大小

大多数项目保持浏览器默认的 16px。如果您想明确，可以直接设置：

html {
  font-size: 16px;
}

如果您的设计系统使用不同的比例，您可以在这里进行调整。每个 rem 值将基于此数字。

2. 使用 rem 定义字体大小

h1 {
  font-size: 2rem;
}

p {
  font-size: 1rem;
}

small {
  font-size: 0.875rem;
}

这使得当根大小变化时，所有文本一起缩放。

3. 对间距使用 rem

button {
  padding: 0.75rem 1.25rem;
  margin-top: 1rem;
}

当间距使用 rem 时，您的布局比例保持一致。

4. 仅对小固定值使用 px

边框、1px 线条或锐利的 UI 细节仍然更适合使用 px：

button {
  border: 1px solid #ccc;
}

5. 使用不同的浏览器字体大小进行测试

缩放页面或更改浏览器默认字体大小。如果您的布局干净地缩放，说明您正确使用了 rem。

通过将稳定的根大小与一致的 rem 使用相结合，您将获得一个在现代设备和屏幕尺寸之间既可访问又易于维护的布局。

相关转换器：

• PX 转 REM 转换器

  即时计算像素转 rem

• EM 转 PX 转换器

  即时计算 em 转像素

• PX 转 EM 转换器

  即时计算像素转 em

• VH 转 PX 转换器

  即时计算 vh 转像素

• PX 转 VW 转换器

  即时计算像素转 vw

• PX 转百分比转换器

  即时计算像素转百分比