PX 转 EM 转换器

EM 转 PX 公式

em = px / parent-font-size

要将像素转换为 em 单位，请将像素值除以父元素的字体大小。

下表显示了基于父字体大小为 16px 的常见 em 转 px 转换。在将可缩放的 em 值转换为像素单位时，可以将其用作快速参考。

为什么使用 EM 而不是 PX？

EM 单位相对于它们所使用的元素的字体大小进行缩放。这使得它们在您希望间距或排版根据组件自身的文本大小而不是全局根大小进行调整时非常有用。

当您更改元素的字体大小时，任何以 em 定义的测量值会自动调整。像素值保持固定，这可能会限制灵活性并使组件更难以缩放。

• 组件级缩放: 尺寸适应元素自身的字体大小。
• 灵活的 UI 组件: 间距和排版在可重用块内一起缩放。
• 一致的比例: 子元素自然继承缩放。
• 更好的可维护性: 组件样式中较少的固定像素值。

使用 EM 的最佳实践

使用 em 单位可以实现适应元素字体大小的组件级缩放。这使得 em 在构建排版和间距一起增长的灵活 UI 组件时非常有用。

• 对组件级尺寸使用 em: 组件内部的间距和排版与其自身的字体大小保持成比例。
• 对嵌套元素使用 em: 当父字体大小变化时，子元素自然缩放。
• 有意设置字体大小: 避免不必要的覆盖以防止复合 em 值。
• 使用 em 时避免深层嵌套: 多个层级的继承可能会使计算变得不可预测。
• 对固定元素偏好使用 px: 边框、1px 线条或像素完美的 UI 部件应保持在 px 中。
• 对全局排版使用 rem: 在需要时结合 rem 用于布局级缩放和 em 用于组件缩放。
• 通过更改父字体大小进行测试: 这有助于确认组件是否按预期缩放。

遵循这些最佳实践可确保可预测的缩放和更清晰的组件架构，尤其是在现代 CSS 设置中结合使用 em、rem 和 px 时。

EM 在 CSS 中的工作原理

em 单位基于其使用的元素的字体大小。如果未设置自定义字体大小，它将从其父元素继承该值。这意味着 em 单位可以根据周围上下文的排版进行缩放，这使得它们灵活，但有时比 rem 更复杂。

例如，如果一个元素的字体大小为 16px，则：

1em = 16px

当您以 em 单位定义间距或排版时，浏览器通过将 em 值乘以当前元素的字体大小来计算最终的像素值。此计算发生在渲染的布局阶段。

• 由父元素控制: 所有 em 值依赖于元素或其父元素的计算字体大小。
• 上下文感知: 当其父字体大小变化时，组件会自动缩放。
• 受嵌套影响: 多个层级的嵌套字体大小可能会复合值，使得 em 强大但有时难以预测。
• 对组件有用: 使用 em 保持嵌套间距和排版在 UI 块内成比例。

简而言之，em 提供了灵活的缩放，遵循您组件的结构。当排版和间距应根据局部上下文而不是全局根一起增长时，它是理想的选择。

如何使用 EM

一旦您了解它们如何从父元素继承字体大小，使用 em 单位就很简单。EM 特别适用于构建文本和间距应一起缩放的组件。

1. 在父元素上设置基础字体大小

1em 的值取决于当前元素的字体大小。如果您不设置自定义值，它将从其父元素继承。例如：

.card {
  font-size: 16px;
}

除非被覆盖，否则该组件内的所有基于 em 的大小将相对于 16px 计算。

2. 使用 em 定义字体大小以进行组件缩放

.card-title {
  font-size: 1.5em;
}

.card-text {
  font-size: 1em;
}

.card-note {
  font-size: 0.875em;
}

如果您稍后更改组件的基础字体大小，所有嵌套文本将自动缩放。

3. 对组件间距使用 em

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

对间距使用 em 确保按钮、卡片和其他 UI 元素与组件的排版成比例缩放。

4. 使用 em 时避免深层嵌套

每个嵌套的字体大小都会影响所有子 em 值。这是强大的，但如果过度使用可能会导致意外缩放。

.parent {
  font-size: 16px;
}

.parent .child {
  font-size: 1.25em;
}

.parent .child .inner {
  font-size: 1.25em;
}

在这个例子中，内部元素的大小比预期的要大，因为大小复合。在使用 em 时保持嵌套浅。

5. 对固定元素使用 px

边框和 1px 线条仍然最好用像素定义：

.button {
  border: 1px solid #ccc;
}

6. 通过更改父字体大小测试缩放

增加父容器的字体大小将显示您的组件是否正确缩放。如果一切成比例增长，则您的 em 使用是正确的。

通过一致的 em 使用，UI 组件保持灵活、可缩放且更易于维护，尤其是在与 rem 和 px 结合使用时，适用于更大的设计系统。

相关转换器：

• PX 转 REM 转换器

  即时计算像素转 rem

• REM 转 PX 转换器

  即时计算 rem 转像素

• EM 转 PX 转换器

  即时计算 em 转像素

• VH 转 PX 转换器

  即时计算 vh 转像素

• PX 转 VW 转换器

  即时计算像素转 vw

• PX 转百分比转换器

  即时计算像素转百分比