EM 转 PX 转换器

EM 转 PX 公式

px = em * parent-font-size

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

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

为什么使用 EM 而不是 PX？

EM 单位提供组件级缩放，但结果像素大小并不总是显而易见。将 em 转换为 px 可以更容易地调试嵌套组件，检查与设计规范的内边距和排版，并向其他团队成员解释行为。

当您更改元素的字体大小时，任何以 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 转像素

• PX 转 EM 转换器

  即时计算像素转 em

• VH 转 PX 转换器

  即时计算 vh 转像素

• PX 转 VW 转换器

  即时计算像素转 vw

• PX 转百分比转换器

  即时计算像素转百分比