PX转REM转换器

PX转REM转换器 可以使用项目实际采用的任意根字体大小，将像素值转换为 rem 或 em 单位，也可以反向转换。粘贴一个数值或完整的字号比例后，你会得到转换结果、一个保留原始像素注释且可直接复制的 CSS 代码块、以真实比例显示每个大小的标尺，以及访问者增大浏览器字体大小时 rem 值如何响应的预览。

PX 转 REM 公式

像素与 rem 之间的转换只需进行一次除法——你唯一需要知道的是文档的根字体大小。

使用浏览器默认的 16 px 根字体大小时，结果是 24px ÷ 16 = 1.5rem 和 1.5rem × 16 = 24px。如果样式表设置了 html { font-size: 62.5%; }，根字体大小就会变成 10 px，同样的 24 px 就是 2.4rem。

PX 转 REM 换算表（16px 根字体）

rem 与 em：为什么嵌套会改变一切

rem 以根元素（html）为基准，因此在文档中的任何位置含义都相同。em 以父元素的计算字体大小为基准，因此相同的 em 值在嵌套时会不断叠加。下面的图示展示了从 16 px 根字体开始，在三层嵌套中都使用相同的 1.5 倍数：

大多数团队最终采用的实用规则是：字体大小、布局间距和断点使用 rem；对于应该随自身组件缩放的内容，例如按钮内边距或文字旁图标的大小，则有意使用 em。

为什么使用 rem 而不是 px？

• 无障碍性。访问者将浏览器默认字体大小设置为 20 px 后，所有基于 rem 的尺寸都会按比例增大。硬编码为 px 的尺寸则完全忽略这一偏好。
• 全局缩放只需一个控制点。在媒体查询中改变根字体大小，整个字号比例和间距节奏都会一起变化，无需逐个组件覆盖。
• 间距节奏一致。使用 rem 表示内边距和外边距，可以让垂直节奏与字号比例保持关联，而不会逐渐偏离。
• 便于使用设计令牌。现代设计系统（以及 Tailwind 的默认比例）都使用 rem 发布尺寸，因此转换已有 px 值会让交接更轻松。

62.5% 根字体大小技巧

许多团队会添加以下规则，让 1rem 等于整洁的 10 px，从而使心算转换变得非常简单：

html { font-size: 62.5%; }  /* 16px × 0.625 = 10px */
body { font-size: 1.6rem; } /* back to a readable 16px */

.card-title { font-size: 2.4rem; } /* 24px */
.card-body  { font-size: 1.4rem; } /* 14px */

由于 62.5% 是浏览器默认值的百分比，而不是固定的像素值，因此它仍会尊重访问者的字体大小偏好。需要记住的是，要将 body 重置为大约 1.6rem，否则默认文本会以 10 px 显示。将上方的根字体大小字段设置为 10，即可根据此设置进行转换。

媒体查询中的 rem

在媒体查询中，rem 是根据浏览器的初始根字体大小解析的，而不是根据你在 CSS 中设置的 html 字体大小。因此，即使样式表声明了 html { font-size: 10px }，@media (min-width: 48rem) 也始终是 768 px。这让使用 rem 的断点安全且可预测，也是少数 em 与 rem 行为完全相同的场景之一。

哪些情况下仍应使用 px

• 细线边框和分隔线 — 1 px 边框应保持 1 px；缩放会产生模糊的子像素线条。
• 固定尺寸资源 — 精灵图偏移量、精确的阴影偏移量以及具有已知固有尺寸的图像。
• 画布和打印输出 — 当你确实需要表达物理尺寸或设备像素测量时。

如何使用本转换器

1. 选择方向：px → rem、rem → px、px → em 或 em → px。
2. 输入数值：输入一个数字，或输入一组以逗号或空格分隔的完整比例（一次最多 20 个）。末尾带单位的值（例如 24px）也会被接受并忽略单位。
3. 设置根字体大小：浏览器默认值使用 16；也可以点击预设按钮选择 10（62.5% 技巧）、12、14、18 或 20。
4. 点击转换：查看结果表、真实比例尺寸标尺、无障碍预览和 CSS 代码块。
5. 复制 CSS：一个按钮即可复制所有 font-size 声明，并在注释中保留源像素值。

常见问题

如何将 px 转换为 rem？

将像素值除以根字体大小即可。浏览器默认根字体大小为 16 px 时，24 px ÷ 16 = 1.5rem。反向转换时，将 rem 值乘以根字体大小：1.5rem × 16 = 24 px。

1rem 等于多少 px？

1rem 等于页面的根字体大小。所有主流浏览器的默认值都是 16 px，因此除非 html 元素或访问者的浏览器设置改变了它，否则 1rem 就是 16 px。

rem 和 em 有什么区别？

rem 始终相对于 html 元素上的根字体大小，因此 1.5rem 在文档中的任何位置都是相同大小。em 相对于元素自身父元素的字体大小，因此嵌套元素会不断叠加：在另一个 1.5em 内部使用 1.5em，最终会渲染为基础大小的 2.25 倍。

什么是 62.5% 根字体大小技巧？

设置 html { font-size: 62.5%; } 会将根字体大小从 16 px 变为 10 px，因此 1rem 等于 10 px，心算变得非常简单：24 px 就是 2.4rem。由于 62.5% 是相对值而不是绝对像素值，它仍会随访问者的浏览器字体大小偏好进行缩放。

字体大小应该使用 px 还是 rem？

字体大小、间距和媒体查询应使用 rem，这样访问者提高默认浏览器字体大小时，布局也会随之增大。对于不应缩放的值，例如细线边框、单像素分隔线和部分阴影偏移，则保留使用 px。

rem 值必须是整数吗？

不必。浏览器可以正常处理小数 rem 值，并会在内部计算子像素尺寸。如果你更喜欢整洁的数字，可以选择能够均匀分割字号比例的根字体大小，例如 10 px 或 8 px，也可以使用本转换器的小数精度选项。

rem 可以用于内边距、外边距和媒体查询吗？

可以。只要 CSS 接受长度值，rem 就可以使用，包括内边距、外边距、宽度、间隙和 border-radius。在媒体查询中，rem 是根据初始的 16 px 根字体大小解析的，而不是根据自定义的 html 字体大小，因此 48rem 断点始终是 768 px。

更多资源

• CSS 长度单位 - MDN
• 相对于字体的长度 - W3C CSS Values