Px ↔ Rem 转换器

按任意根字号做 px 与 rem 的双向换算 —— 单个值或整段 CSS 一次过。只改写源单位的数字,其余内容原样保留,并附常用字号与间距档位的双向对照表。

同时提供 Windows 桌面版。

关于这个工具

一个 rem 等于多少 px,由根字号说了算。新开的浏览器是 16px,所以 24px 就是 1.5rem —— 但不少项目会把根字号设成 62.5%(10px)来简化心算,也有些设计系统用 15px 或 18px。所以这里的根字号是输入项而不是默认假设:同样 24px,根字号 16 时是 1.5rem,根字号 10 时是 2.4rem,根字号 18 时是 1.333rem。

改写的范围刻意收得很窄:px → rem 模式下只动写成了 px 的值。如果你粘贴的样式块迁移到一半 —— 有些声明已经是 rem —— 转换器不会碰它们,所以同一段可以反复过,不会把已改好的部分再算一遍。结果上方的计数告诉你究竟改了几个值,这是发现"粘进来的东西和你以为的不一样"最快的办法。

舍入是这件事的一半。根字号 16 时 14px 正好是 0.875rem,但 15px 是 0.9375rem —— 四位小数没人想写进样式表。选两到三位小数,工具直接给出能抄的值;下方对照表列出了最常用的档位,那些尺寸连打字都不用。

常见问题

根字号应该填多少?
填你样式表里实际设在 html(或 :root)上的那个值。浏览器默认 16px,如果你的 CSS 从没改过它,填 16 就对。用了 62.5% 的 reset 就填 10。根字号填错是这类换算"悄悄全错"的第一大原因 —— 所有值按同一比例偏移,看上去没有任何明显异常。
为什么有些值没被改写?
只有源单位会被改写。px → rem 模式下,已经是 rem 的值原样通过 —— 这是刻意的:迁移到一半的样式表可以一遍过,而不会把同一批声明换算两次。需要换另一种单位时,切换方向再跑一遍即可。
所有值都应该换成 rem 吗?
通常不是。rem 适合字号、间距和应当跟随用户字号偏好的布局;1px 边框、阴影、媒体查询断点常常刻意留在 px。工具改写你选中的部分,不替你判断哪个属性属于哪种单位。
CSS 函数、变量、注释能处理吗?
工具改写文本里所有"数字+单位"的出现,包括 calc 这类函数调用、自定义属性值和注释里的。这通常正是想要的 —— 但请看一眼计数:如果只想转换声明而计数比预期高,多半是注释里也有匹配。
粘贴的内容会被发送到别处吗?
不会。换算就是页面里的纯字符串运算:没有服务器、没有请求、没有日志,断网也能正常用 —— 这一点你可以自己验证。