REM转PX转换器

使用方法

1. 「rem 值」填要换算的 rem 数，示例 1.5。它乘以根字号就是像素值，1.5 rem 在根字号 16 px 下等于 24 px。
2. 「根字号」填 html 的 font-size，示例 16，这是浏览器默认值。改过全局字号的站点要填改后的数，例如 62.5% 对应 10 px、125% 对应 20 px。
3. 「px 值」是反向输入：填一个像素数，页面按同一根字号除以它得到对应 rem，示例 24。它与上面两栏共用同一个根字号，改根字号时两个方向一起重算。
4. 三栏中任意一栏按回车就触发重算，也可以点「换算」。输入过程中不清空结果，只在数值非法时给出具体提示。
5. 结果区同时给出两个方向：rem 乘根字号得到 px，px 除以根字号得到 rem，示例在根字号 16 下是 1.5 rem = 24 px 与 24 px = 1.5 rem。
6. 下方对照表按当前根字号列出十四个 rem 到 px 的结果，默认展开六行，点「加载更多」看全；「复制对照表」按制表符分隔，「导出 CSV」带 UTF-8 BOM 可直接用表格软件打开。

这个REM转PX转换器能解决什么问题

设计稿标注用的是像素，前端代码里写的是 rem，两者之间的换算几乎每个页面都要做一遍。本页把 rem 转 px 和 px 转 rem 放进同一组输入，填任意一边、再填当前根字号，就能得到另一边，省掉“16 乘 1.5 等于 24”这类反复出现的乘法。相邻方向的反向工具是 PX转REM转换器，本页只负责 rem 到 px 这一个方向，标题与算式都只写这一个朝向。

真正麻烦的地方不是单次换算，而是根字号一变、整张对照表都要重算。用 62.5% 技巧把根字号压到 10 px 的站点、跟随系统字号放到 20 px 的站点，同一段 rem 代码会得到完全不同的像素值，注释里写死的像素数随之失真。本页因此把根字号做成可调输入，并在断点表里展示 em 断点随根字号漂移的结果，让“为什么这里要写 40em 而不是 640px”有据可查。

计算原理与变量说明

本页只涉及两个变量与一个常量：rem 值、px 值，以及作为换算基准的根字号。

• px = rem × 根字号：根字号就是 html 元素的 font-size，默认 16 px。示例 1.5 × 16 = 24 px。
• rem = px ÷ 根字号：反向除以同一个根字号，示例 24 ÷ 16 = 1.5 rem。
• 根字号取值：示例 16 px。改成 10 px 时 1 rem = 10 px，改成 20 px 时 1 rem = 20 px，同一个 rem 值的像素结果随之整体缩放。
• em 与 rem 的分叉点：rem 相对根元素，em 相对当前元素或父元素。1.5 em 在 16 px 正文里是 24 px，嵌进 font-size 20 px 的父元素后变成 30 px，而 1.5 rem 始终是 24 px，不随父元素变化。
• 媒体查询断点：媒体查询里的 em 与 rem 都相对根字号。40 em 在根字号 16 px 下是 640 px，根字号改成 20 px 后变成 800 px，断点整体漂移。
• 无障碍缩放：用户把浏览器默认字号调到 20 px 时，1 rem 的设计值整体放大 25%（20 ÷ 16），而用 px 写死的排版不会跟着变。

为什么 rem 不会像 em 那样累积：rem 的参照物始终锁死在根元素，无论元素嵌多深都读同一个值；em 读的是最近的父级 font-size，父级本身又可能用 em 定义，于是多层嵌套会把倍率逐层相乘。正文用 rem 定字号、用 px 定边框，正是把“需要跟随用户字号”的属性和“不需要跟随”的属性分开。

为什么媒体查询里的 em 断点会漂移：媒体查询早于任何元素，没有父元素可参照，规范规定其中的 em 与 rem 都按根字号计算。这带来一个隐藏依赖——站点只要改 html 的 font-size，所有用 em 写的断点就一起挪位。40 em 与 640 px 只在根字号恰好 16 px 时等价，根字号 20 px 时前者指向 800 px，原本为手机准备的布局会推迟到平板宽度才生效。

为什么 62.5% 这个技巧要谨慎：把根字号设成 62.5% 相当于 10 px，于是 1 rem = 10 px、1.6 rem = 16 px，换算立刻变成小数点移位，心算很快。代价是它覆盖了用户自己设定的字号偏好——用户把默认字号调大是为了看得清，站点把根字号写死成 10 px 会让这份偏好落空。

为什么 px 不能替代 rem 做字号：px 是绝对单位，用户改浏览器字号时它不跟着变，所以纯 px 排版对低视力用户不友好。反过来，边框、阴影、细线这类不随字号放大更协调的属性用 px 更合适，rem 缩放它们会让边框在小字号下显得过粗。把这套分工记住，就不必在每个属性上反复纠结。

为什么要把双向放进同一组输入：设计稿给的是 px、代码要写 rem 是上行，反过来审查旧代码想看懂某个 rem 到底多大是下行，两个方向在日常里交替出现。把反向输入留在同屏，能避免“先复制到算式里再手算一遍”这种来回切换，也减少了中间抄错数字的机会。

完整示例（数值仅作演示）

示例条件：rem 值 1.5、根字号 16 px、反向 px 值 24，结果按本页自己的算法复算得到。

• rem 转 px：1.5 × 16 = 24 px。
• px 转 rem：24 ÷ 16 = 1.5 rem。两条方向互为逆运算，示例数值彼此吻合。
• 根字号换成 10 px：1.5 × 10 = 15 px，反向 24 ÷ 10 = 2.4 rem，像素结果随根字号线性变化。
• 根字号换成 20 px：1.5 × 20 = 30 px，反向 24 ÷ 20 = 1.2 rem。
• 断点漂移：40 em 在根字号 16 px 下是 640 px，根字号改成 20 px 后是 800 px。
• 嵌套对照：1.5 em 在 16 px 正文里是 24 px，放进 font-size 20 px 的父元素后是 30 px；同样环境下 1.5 rem 仍是 24 px。
• 缩放校验：根字号 16 px 换成 20 px，1 rem 从 16 px 变 20 px，放大比例为 20 ÷ 16 = 25%。

示例数值均为演示，不代表任何具体项目的设计规范。

rem 与 px 换算对照表

下表固定根字号 16 px，列出常用 rem 值与像素值的对应关系，并给出反算校验；这些数值可由 px = rem × 16 逐条复算，反向可由 px ÷ 16 回到原值。

下表把根字号从 10 px 拉到 24 px，列出 1 rem、0.75 rem、1.5 rem、2 rem 四个设计值的像素结果，用来看缩放幅度。

下表给出常用断点在根字号 16 px 与 20 px 两种设定下的像素值，用来观察 em 断点如何漂移；同一行的两个数字来自同一个 em 值。

结果边界、舍入与适用说明

• 根字号限定在 8 到 32 px，步长 1；超出这个区间时给出提示，因为字号根值极少落在此范围之外。
• rem 值限定在 0 到 100，步长 0.001；负数会被拒绝，超过 100 会提示已超出常用排版范围。
• 反向 px 值限定在 0 到 2000，步长 1；超过 2000 px 时提示这更像整页容器而非字号。
• rem 转 px 是精确乘法，只在显示时按三位小数取整；px 转 rem 是除法，可能出现无限小数，显示同样保留三位。
• 输入为空或非数字时给出具体提示，不会用上一次的结果顶替本次输出。
• 断点表按媒体查询口径计算：其中的 em 与 rem 都相对根字号，16 px 下 40 em 等于 640 px，20 px 下同一行变成 800 px。
• 嵌套示例按“父元素用自己的 font-size”计算，em 逐层累积，rem 只在根元素取一次值。
• 结果只反映算术关系：实际渲染还要看浏览器的最小字号限制、页面缩放与字体回退，这些不属于换算范围。

常见问题

相关工具

• PX转REM转换器：反方向换算，把像素值还原成 rem，与本页互补。
• CSS压缩工具：合并空白与注释，缩小样式表体积后再对照换算。
• HTML格式化工具：把压缩过的标签结构重新缩进，便于逐层核对字号。
• 正则表达式测试工具：批量定位页面里写死的像素字号。
• JSON格式化工具：把字号配置等 JSON 数据展开成可读结构。