📏 Px 转 Rem 转换器
px ↔ rem/em 双向转换，基准字体大小可配置。
🔒 100% 客户端处理
常用 px 转 rem 对照表
| 像素 | Rem / Em |
|---|
在 px 和 rem（或 em）之间即时双向转换，基准字体大小可自由配置。在任一输入框中输入，另一个立即更新——无需点击转换按钮。1px 到 64px 的常用值对照表由同一套转换逻辑生成，方便随手查阅标准换算结果。适合需要把像素设计稿改造成可缩放、可访问 CSS 的前端开发者与设计师。
如何使用
- 设置基准字体大小： 保持浏览器默认的 16px，或输入你项目的根字体大小。
- 任意一侧输入： 输入 px 得到 rem，或输入 rem/em 得到 px——边输入边转换。
- 切换 rem 或 em： 使用结果框旁的下拉菜单；参考尺寸与基准一致时计算相同。
- 查看对照表： 滚动常用值表，查看所选基准下 1–64px 的换算结果。
功能特性
- 双向转换——修改任意一侧，另一侧即时更新
- 基准字体大小可配置（默认 16px），适配自定义根字号的项目
- 同时支持 rem 和 em 输出单位
- 结果最多保留 4 位小数，自动去掉末尾的零
- 常用值对照表（1–64px）随基准变化即时重新生成
- 完全本地运行，数据不上传
为什么要把 px 转成 rem？
px 是绝对的：无论用户如何设置，16px 就是 16 个设备独立像素。这让 px 可预期但僵化。rem 相对于根字体大小，用 rem 搭建的布局会在用户调大浏览器默认字号时自动缩放——这是 WCAG 的核心可访问性要求。换算本身只是简单的除法（px ÷ 基准），但对样式表里的每个值心算很容易出错。这个工具双向完成计算，并备好速查表，让转换整套设计规范变成复制粘贴的事。62.5% 技巧（把根字号设为 10px，让 1.6rem = 16px）也支持：把基准设为 10 即可。
使用场景
- 设计稿交付： 把 Figma 或 Sketch 设计稿中的像素值转成 CSS 里的 rem。
- 可访问性审计： 找出固定的 px 字号和间距，替换为可缩放的 rem 等价值。
- 设计系统： 基于 10px 或 20px 等非标准基准搭建间距与排版体系。
- 学习 CSS： 借助对照表建立常见 px/rem 对应关系的直觉。
相关工具
常见问题
px、rem 和 em 有什么区别？
px 是固定的绝对单位。rem 相对于根元素的字体大小（浏览器默认为 16px），而 em 相对于父元素的字体大小。在 16px 基准下，24px 等于 1.5rem——只有当父元素字体大小也是 16px 时才等于 1.5em。
为什么应该用 rem 而不是 px？
rem 会跟随用户在浏览器中设置的字体大小缩放，布局对调大默认字号的用户保持可用和可访问。px 会忽略该设置，可能为视力障碍用户破坏布局。
基准字体大小应该设置为多少？
浏览器默认值 16px 是标准做法，也是大多数设计系统的假设值。只有当项目设置了不同的根字体大小时才需要修改，例如 html { font-size: 62.5% } 会让 1rem 等于 10px。
这个工具也能转换 em 吗？
可以。在结果输入框旁的下拉菜单中选择 em。只要 em 的参考字体大小与你选择的基准一致（根层级组件的常见情况），计算方式与 rem 完全相同。
转换结果有多精确？
结果最多保留 4 位小数并去掉末尾的零——对 CSS 来说精度绰绰有余，因为浏览器渲染时本身就会做亚像素取整。