📏 Px 转 Rem 转换器

把设计稿里的像素值转换成可缩放的 CSS，是前端开发中最重复的工作之一。这个转换器会在你输入时双向换算：输入像素得到 rem，或输入 rem 得到像素，基准字体大小由你控制。工具还会生成一张 1px 到 64px 的对照表，整套间距体系不用打开计算器就能翻译完。

使用方法

• 设置基准字体大小： 保持 16 使用浏览器默认值，或填写你项目真实的根字号。
• 编辑任一输入框： 在 px 框输入会更新 rem 框，在 rem 框输入则更新 px。没有转换按钮。
• 选择 rem 或 em： rem 输入框旁的下拉菜单只改变标签文字，计算使用的是同一个基准。
• 查看对照表： 1–64px 的表格会按你选定的基准重新生成，方便直接复制。

换算公式

整个工具只依赖一次除法和一次乘法。像素转 rem，除以基准：

rem = px ÷ base

基准为 16px 时，32px ÷ 16 = 2rem，12px ÷ 16 = 0.75rem。反过来则相乘：

px = rem × base

所以 1.5rem × 16 = 24px，0.875rem × 16 = 14px。无论使用 rem 还是 em，转换器应用的都是同样的两种运算，这也是单位下拉菜单不会改变数字的原因。

两个单位的区别在于参照对象，而不是算术。1rem 永远是根字体大小。1em 是当前元素父级的字体大小，所以在一个父级为 20px 的组件里，1em 的内边距会解析为 20px 而非 16px。如果你按 16px 基准把内边距换成 em，而父级其实是 20px，渲染结果就是错的。rem 没有这种歧义。

如何选择基准字体大小

对几乎所有项目来说，16 都是安全的答案，但实践中还会出现另外三种基准：

基准	来源	1rem 等于	说明
16px	浏览器默认	16px	无障碍优先的项目应与之保持一致
10px	html { font-size: 62.5% }	10px	心算方便；请在大字号下测试
20px	自定义根规则	20px	部分设计系统用 20px 正文
18px	自定义根规则	18px	阅读量大的站点常用

无论选哪个，都要在浏览器开发者工具里检查 html 元素的计算字号来确认。猜错基准是产生细微换算偏差的最常见原因。

常见数值速查

像素	基准 16 下的 rem	基准 10 下的 rem
8px	0.5	0.8
12px	0.75	1.2
16px	1	1.6
18px	1.125	1.8
20px	1.25	2
24px	1.5	2.4
32px	2	3.2
48px	3	4.8
64px	4	6.4

规律很容易延伸：基准 16 时，每 4px 一步是 0.25rem，所以 28px 是 1.75rem，36px 是 2.25rem。基准 10 时，每 1px 就是 0.1rem。

换算一份真实设计规范

取一个在 Figma 里定义的小卡片组件：20px 内边距、24px 标题、15px 正文、40px 头像、12px 间距。基准为 16px 时，转换器给出内边距 1.25rem、标题 1.5rem、正文 0.9375rem、头像 2.5rem、间距 0.75rem。CSS 读起来很干净：

.card { padding: 1.25rem; gap: 0.75rem; }
.card h2 { font-size: 1.5rem; }
.card p { font-size: 0.9375rem; }
.avatar { width: 2.5rem; height: 2.5rem; }

同样一份规范换成 10px 根字号：内边距变成 2rem，标题 2.4rem，正文 1.5rem，头像 4rem，间距 1.2rem。注意 15px 的正文在基准 16 下是没那么整齐的 0.9375rem——这正是心算容易出错的数值，也是这个工具的用武之地。如果设计师交给你的规范里全是 15px、22px 这样的零散数字，输入一次基准，剩下的交给对照表。

边界情况与精度

• 小数像素： 15.5px ÷ 16 = 0.96875，保留四位小数。浏览器处理亚像素值没有问题。
• 极小值： 基准 16 时，1px 是 0.0625rem。这是合法的 CSS，不过 1px 边框通常刻意留在 px 里，以保持真正的细线。
• 空输入： 清空一个字段会同时清空配对的字段，而不是把空白当作零。
• 无效基准： 零、负数和非数字输入会显示错误并停止换算。
• 舍入漂移： 反复往返换算会改变最后一位小数，所以应从源值一次转换，而不是在结果之间连续编辑。

为什么 rem 在可访问性上胜过 px

像素是绝对的。当用户为了更舒适地阅读，把浏览器默认字号调到 20px 时，16px 的标题纹丝不动——仍是 16px，在更大的正文旁边显得更小。rem 会继承这一偏好，所以设为 1.5rem 的标题在 20px 根字号下变成 30px，保持原有的比例关系。WCAG 指南把无法在不损失内容的前提下放大的文字视为缺陷，而 px 排版正是常见的元凶。用 rem 搭建的间距体系也会随文字一起变大，字号放大时边距不会挤成一团。少数细边框和一次性阴影留在 px 里是合理的例外；字体和布局间距应当使用 rem。

相关工具

• 单位换算
• 宽高比计算器
• 颜色对比度检查
• 圆角生成器