通过MCP连接 →

输入计算

数学公式

广告

结果

对应的 EM 值
1
em
像素值 16 px
基准字号 16 px
计算结果 1 em

什么是 PX 转 EM 换算器?

PX 转 EM 换算器可以把像素尺寸换算为 CSS 中使用的 em 单位。像素(px)是绝对单位,而 em 是相对单位,会根据基准字号进行缩放。使用 em 来设计页面,可以让布局更灵活、更具无障碍性,因为元素会随着用户的字体偏好一同放大或缩小。

如何使用

输入你想换算的像素值,以及以像素为单位的基准字号。大多数浏览器的根字号默认为 16px,因此 16 是最常用的基准值。点击「计算」即可得到对应的 em 数值。

计算公式详解

换算其实就是一个简单的除法:

$$\text{EM} = \frac{\text{像素值 (px)}}{\text{基准字号 (px)}}$$

如果基准字号为 16px,那么 16px 等于 1em,24px 等于 1.5em,8px 等于 0.5em。选对基准值非常关键:em 是相对于父元素字号的,而父元素的字号未必和根元素相同。

展示像素值除以基准字号等于 em 值的示意图
em 值是像素值除以以像素为单位的基准字号。

实例演示

假设你要在基准字号为 16px 的情况下换算 24px。套用公式:$$24 \div 16 = 1.5\,\text{em}$$也就是说,24px 的标题相当于 1.5em。

将 16 像素基准下的 24 像素转换为 1.5 em 的示例
示例:在 16px 基准下,24px 等于 1.5em。

常见问题

我应该使用多大的基准字号?请使用该元素父级的字号。若是针对根级别进行换算,浏览器通常默认为 16px。

em 和 rem 有什么区别?em 相对于父元素的字号,而 rem 始终相对于根元素(html)的字号。

为什么要用 em 而不是 px?em 会随用户的字体设置一起缩放,从而提升无障碍体验和响应式设计效果。

最后更新: