跳至内容
🛠️
Whiz Tools

像素到REM到EM转换器 – 免费CSS单位计算器

像素、REM与EM转换器用于CSS单位换算，输入任意一个像素、REM或EM数值，即可同时得到另外两种单位的等效换算结果，换算基于16px等于1rem的默认根字体大小。工具支持自定义根元素字体大小和父元素字体大小两项参数，方便前端开发者在响应式网页排版设计中快速核对不同单位之间的对应关系。

像素（PX）、根em（REM）和em（EM）单位转换器

在像素（PX）、根em（REM）和em（EM）单位之间进行转换。在任意字段输入值，即可查看其他单位的等效值。

px
px
px
rem
em
对于负值或零值，无法进行可视化

转换公式

  • PX转REM：像素值 ÷ 根字体大小
  • PX转EM：像素值 ÷ 父元素字体大小
  • REM转PX：rem值 × 根字体大小
  • EM转PX：em值 × 父元素字体大小
加载计算器...
📚

文档

PX、REM 和 EM 单位转换器

px 到 rem 和 em 转换器可在像素（px）、根元素字体大小单位（rem）和 em 之间转换 CSS 长度，使用用户设置的根字体大小和父元素字体大小。这三种单位是 CSS（用于设置网页样式的语言）中设置文本大小和间距最常见的方式。

什么是 px、rem 和 em？

**像素（px）**是固定单位。设置为宽度为 200px 的框，无论页面使用什么字体大小，其宽度都保持为 200px。

rem（“根 em”）是一种随页面根元素的字体大小缩放的单位，根元素通常是 <html> 标签。除非网站修改设置，大多数浏览器会将根字体大小设为 16px。如果根字体大小为 16px，那么 1rem 就等于 16px。

em 是一种随父元素（包含该元素的元素）的字体大小缩放的单位。如果父元素设置了 font-size: 20px，那么该父元素内的 1em 就等于 20px。

rem 和 em 的主要区别在于各自参照的对象不同。Rem 始终参照根元素。Em 参照最近的父元素，因此其值可能在每一层嵌套中发生变化。

如何将 px 换算为 rem

要将像素换算为 rem，请用像素值除以根字体大小：

r=pRr = \frac{p}{R}

其中，r 是以 rem 为单位的长度，p 是以像素为单位的长度，R 是以像素为单位的根字体大小。

算例

在默认根字体大小为 16px 时，24px 换算为：

24 ÷ 16 = 1.5rem

如果网站将根字体大小设为 10px（常见做法是设置 html { font-size: 62.5%; }，因为 62.5% 的 16px 是 10px），那么同样的 24px 会变为：

24 ÷ 10 = 2.4rem

如何将 rem 换算为 px

反向换算时，请将 rem 值乘以根字体大小：

p=r×Rp = r \times R

其中，p 是以像素为单位的长度，r 是以 rem 为单位的长度，R 是根字体大小。

在根字体大小为 16px 时，1.5rem 换算回 1.5 × 16 = 24px。

如何将 px 换算为 em

要将像素换算为 em，请用像素值除以父元素的字体大小：

e=pPe = \frac{p}{P}

其中，e 是以 em 为单位的长度，P 是父元素的像素字体大小。

算例

如果父元素的字体大小为 20px，那么 24px 换算为：

24 ÷ 20 = 1.2em

如何将 em 换算为 px

将 em 值乘以父元素的字体大小：

p=e×Pp = e \times P

其中，p 是以像素为单位的长度，e 是以 em 为单位的长度，P 是父元素的字体大小。

在父元素字体大小为 20px 时，1.2em 换算回 1.2 × 20 = 24px。

如何将 rem 换算为 em，以及将 em 换算为 rem

由于 rem 和 em 参照不同的字体大小，因此二者之间的换算需要同时使用根字体大小和父元素字体大小：

e=r×RPe = r \times \frac{R}{P}

r=e×PRr = e \times \frac{P}{R}

其中，R 是根字体大小，P 是父元素的字体大小。

算例

当根字体大小为 16px、父元素字体大小为 20px 时，2rem 换算为：

2 ×（16 ÷ 20）= 1.6em

如果根字体大小和父元素字体大小相同，那么 1rem 始终等于 1em。

各单位的适用场景

对于不应改变大小的细节，像素很合适，例如 1px 边框或固定宽度的图标。

Rem 常用于页面中需要保持一致的间距和字体排版。由于它始终参照根字体大小，rem 值不会因元素嵌套得多深而改变。这也意味着，用户调高浏览器默认字体大小时，基于 rem 的布局会自动调整，从而帮助低视力读者。

Em 适合用于单个独立组件内部，例如按钮，其中内边距应随按钮自身的字体大小缩放。Em 的一个常见问题是会叠加：如果多个嵌套元素各自使用 font-size: 1.2em，每一层都会将前一层的结果再乘一次，因此字体大小会比预期增长得更快。

1.level-1 { font-size: 1.2em; }  /* 19.2px, if the parent is 16px */
2.level-2 { font-size: 1.2em; }  /* 23.04px (19.2px × 1.2) */
3.level-3 { font-size: 1.2em; }  /* 27.65px (23.04px × 1.2) */
4

三层嵌套后，文本大小约增长了 73%，而不是开发者根据单个 1.2em 规则可能预期的 20%。

使用换算器

  1. 在像素、rem 或 em 输入框中输入值。
  2. 另外两个输入框会自动更新，并四舍五入到小数点后四位。
  3. 将根字体大小设为与项目的 <html> 元素一致。大多数浏览器的默认值为 16px，并且它只影响 rem。
  4. 将父元素字体大小设为与 em 值所在元素的字体大小一致。它只影响 em。
  5. 使用输入框旁的复制按钮复制其值。

两个字体大小字段都接受整数像素值，允许的最小值为 1px。 重置按钮会清除该值，并将两个字体大小都恢复为 16px。

工具会在字段下方为每种单位绘制一条横条。三条横条表示相同的 物理长度，因此它们的宽度相同，可以快速检查 换算是否正确。像素长度不超过 300px 时，横条按实际像素长度绘制；更长的值 会缩小以适应显示区域，因此 600px 和 900px 的值最终都会显示为 300px。像素值大于零时，横条 才会显示。

常见问题

rem 和 em 有什么区别？ Rem 始终指根元素的字体大小。Em 指最近的父元素的字体大小。Rem 值在页面的任何位置都保持不变；em 值则可能根据元素嵌套的深度而变化。

为什么浏览器将 16px 作为默认字体大小？ 16px 长期以来一直是主流浏览器的默认文本大小，因为在典型屏幕上无需额外样式即可舒适阅读。无障碍网页指南建议，文本应能够放大至 200%，同时不破坏页面布局，而 16px 是实现这一目标的实用起点。

什么是 62.5% 技巧？ 设置 html { font-size: 62.5%; } 会将默认的 16px 根字体大小变为 10px，因为 62.5% 的 16 等于 10。这样可以简化 rem 的计算，因为 1.6rem 等于 16px，而 2.4rem 等于 24px。

px、rem 和 em 的值可以为负数吗？ 可以，对于允许负长度值的属性（例如外边距或 CSS 变换）就是如此。在 CSS 中，内边距不能为负数；浏览器会忽略负的内边距值。转换器可以处理负值，但不会为它们绘制横条，因为横条不可能具有负宽度。

每个像素值都应该转换为 rem 吗？ 不一定。边框和其他精细细节通常保留为像素值，因为它们很少需要随字体大小缩放，而且在小于一个像素的宽度下可能显示不均匀。Rem 适合用于应随用户字体大小偏好缩放的间距和排版。

单位的选择会影响页面性能吗？ 不会。浏览器会在布局过程中将每个 CSS 长度转换为相同的内部值，因此 px、rem 和 em 的渲染速度相同。三者之间的选择影响的是可维护性和无障碍性，而不是速度。