快速的本地 px 转 rem 转换器
这款双向 px 转 rem 转换器让您可以轻松地将静态像素值转换为支持无障碍访问且可缩放的相对单位。无论您是将设计稿转换为代码，还是重构旧的样式表，都可以立即计算出所需的精确 CSS 值。
输入时即刻完成计算。由于该工具完全在您的浏览器本地运行，因此零加载时间，无网络延迟。您可以无缝地将 px 转换为 rem，或反向将 rem 转换为 px，全程无需离开键盘。
为什么要将 px 转换为 rem？
多年来，Web 开发者习惯将像素（px）用于从字体大小到内边距的各项设置。然而，像素是绝对单位。如果视障用户更改了浏览器设置，将默认文本调大（例如将标准的 16px 改为 24px），那些写死为像素值的文本将无法适配该设置，依然保持较小字号。
使用 rem（root em）单位，您的整个页面布局都能适配用户的偏好设置。如果用户调大了默认字体大小，您基于 rem 设置的排版、外边距和内边距也会按比例等比放大。这能显著提升网站的无障碍访问体验和响应式效果。使用 CSS rem 计算器可以省去繁琐的换算过程，让您在编写无障碍代码的同时，依然能精准还原设计团队提供的像素尺寸。
CSS rem 计算器的工作原理
转换的数学原理很简单，但频繁在脑海中计算会拖慢工作效率。将像素转换为 rem 的公式如下：
目标像素 ÷ 基础字体大小 = Rem 值
默认情况下，几乎所有网页浏览器的基础字体大小都是 16px。如果你希望标题在标准屏幕上显示为 32px，只需将 32 除以 16，即可得到 2rem。
如果你在处理现有的代码库，需要了解相对单位的实际显示大小，可以使用本工具将 rem 转换为 px。公式正好相反：
Rem 值 × 基础字体大小 = 像素值
本计算器支持双向同时转换。只需在任意输入框中输入数值，另一个会自动实时更新。它还会将复杂的小数结果保留四位小数，在不牺牲精度的前提下保持 CSS 代码的整洁易读。
使用自定义基础字体大小
虽然 16px 是网页标准，但有些项目会修改根字体大小。在旧代码库中，一个非常常见的技巧是“62.5% 技巧”。开发者会在 CSS 中设置 html { font-size: 62.5%; }。由于默认 16px 的 62.5% 刚好是 10px，这就将基础字体大小改为了 10。
以 10 为基数，计算就变得毫不费力：24px 就是 2.4rem，18px 就是 1.8rem，以此类推。如果你参与的项目使用了这种技巧，或者任何其他自定义根字体大小，只需在计算器中修改 基础字体大小 的值即可。本工具支持 1 到 100 之间的任意基数，并会立即重新计算当前数值，同时更新整个参考对照表。
超越排版：间距与布局
虽然 rem 单位最常用于 font-size，但它们对于布局属性同样重要。现代 CSS 最佳实践建议在以下方面使用相对单位：
- 外边距与内边距： 确保元素间的空白随文本一起按比例放大，防止布局拥挤。
- 宽度与高度： 创建能随内部文本自然缩放的按钮或输入框。
- 媒体查询： 使用
rem或em定义断点，确保布局根据文本的实际大小进行调整，而不仅仅依赖屏幕的物理宽度。
在构建复杂的 UI 组件时，您可以将此工具与 CSS 阴影生成器 结合使用，打造完全可扩展且无障碍的设计系统。样式表编写完成后，您可以使用 CSS 压缩工具 减小文件体积，以便用于生产环境。
使用快速对照表
在标准的设计系统中，通常会复用相同的间距和排版比例。在主计算器下方，您可以看到一张自动生成的常用像素值（从 10px 到 64px）对照表，这些数值已自动换算为 rem 和 em 单位。
当您更改基础字号时，该表格会实时更新。它是标准间距（如 16、24、32 和 48 像素）的绝佳速查表，让您无需在计算器中逐一输入每个数值。如果需要换算其他物理单位，您还可以使用我们的综合单位转换器。