像素转 em 转换器

结果

按指定的字号基准值换算像素。本工具会显示em、数值比例相同的rem、百分比以及 CSS 点值。初始基准值为 16px,但 16px 只是一种常见的浏览器默认值:计算em时应填写实际的局部字号,计算rem时则应填写根元素(<html>)的字号。

如何换算像素

  1. 1

    输入像素值

    输入任意数值形式的 CSS 像素值。

  2. 2

    设置正确的基准值

    计算`em`时使用相关元素的字号,计算`rem`时使用根元素的字号。基准值不能为 0。

  3. 3

    查看四种结果

    px ÷ 基准值即为 em/rem,比值 × 100 即为百分比,px × 0.75 即为 pt。

公式与示例

em 或 rem = px / 基准值
百分比    = (px / 基准值) × 100
pt        = px × 0.75

输入24px并将基准值设为16px,结果为1.5em1.5rem150%18pt。CSS 规定96px = 1in = 72pt,因此换算为点时要乘以 0.75。这是 CSS 参考单位之间的关系,并不表示屏幕像素一定对应实际的物理长度。

CSS 单位 基准值应表示什么
em 元素的计算字号;用于font-size属性本身时,则是继承的字号
rem 根元素的字号
% 将同一个选定基准值表示为 100%
pt 与 px 之间固定的 CSS 比例,不使用基准值输入框

使用注意事项

  • 嵌套的em字号会累乘:1.2em里面的1.2em相当于祖先元素字号的1.44倍。
  • 本计算器只有一个基准值输入框,所以显示的emrem数值相同,但两者在 CSS 中参照的字号仍不一样。
  • em/rem 最多显示 6 位小数,百分比/pt 最多显示 4 位小数,并会去掉末尾多余的 0。

常见问题

需要按根元素统一缩放时使用rem;组件需要随局部文字大小缩放时使用em。复制结果之前,请先输入与用途对应的基准值。

不是。16px 是常见初始值,但浏览器偏好设置和网站 CSS 都可能改变它。需要精确换算时,请检查实际的计算字号。

网站会处理输入值以更新结果。在分步模式下,这些值还会出现在页面 URL 中,请勿输入敏感信息。

相关工具

此工具还提供其他语言版本