PX 转 REM 转换器

PX 转 REM 公式

rem = px / 根字体大小

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

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

为什么使用 REM 而不是 PX？

REM 单位比像素更受欢迎，因为它们基于根字体大小进行缩放。这使您的设计更具 可访问性、响应性，并且在不同设备上更一致。

当用户调整浏览器的默认字体大小以提高可读性时，使用 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 使用相结合，您可以获得一个在现代设备和屏幕尺寸之间既可访问又易于维护的布局。

相关转换器：

• REM 转 PX 转换器

  即时计算 rem 转像素

• EM 转 PX 转换器

  即时计算 em 转像素

• PX 转 EM 转换器

  即时计算像素转 em

• VH 转 PX 转换器

  即时计算 vh 转像素

• PX 转 VW 转换器

  即时计算像素转 vw

• PX 转百分比转换器

  即时计算像素转百分比