设计

px 转 rem 换算器

把一个像素值换成 rem 只是一步除法；更需要工具支撑的，是后续的尺寸体系：整套字号要沿用同一比例，响应式标题要在不同屏宽下平滑变化，旧样式表里的大量 px 也需要稳定改写。这个工具围绕这些场景设计。它先在你指定的根字号下，让 px、rem、em、pt 和百分比五个单位联动起来：改动其中任意一个，其余四个立即更新。在此之上，「字号阶梯」页能由一个基准值和一个比例生成整套 rem 台阶，「流式 clamp()」页会画出字号随视口变化的折线，帮助判断它从哪里开始增长、在哪里被夹住，「批量 CSS」页则把整段样式里的 px 一次性改写成 rem。旁边的无障碍面板还演示了一件常被忽略的事：读者一旦调大浏览器字号，用 rem 写的尺寸会随之放大，用 px 写的尺寸仍保持固定。所有运算都在你的浏览器里运行，贴进生产代码也不会外传。

  • 在可调的根字号与父级字号下，px、rem、em、pt、百分比五个单位实时联动
  • 无障碍面板直观演示：读者放大浏览器字号时 rem 随之变大，px 始终不动
  • 由基准字号和音阶比例生成模块化字号阶梯，一键导出为 :root CSS 变量
  • 用 clamp() 搭建流式字号，附字号-视口折线图和可拖动的预览宽度
  • 把整段 CSS 里的 px 一次性改写为 rem，并可保留 0 和 1px 细边框
工具/px 转 rem 换算器
px
px

根字号决定 rem（默认 16px）；em 和 % 则以旁边的父级字号为准。

px基准
24
rem
1.5
em
1.5
pt
18
%
150
24px

文字排版预览

浏览器允许读者自定默认字号。rem 会随这一设置放大，px 则保持固定。下面展示读者调大根字号时，同一尺寸各自的表现。

读者根字号
16px · 默认20px24px
rem
24px
30px
36px
px
24px
24px
24px
rem 跟着读者的字号偏好走。无论读者怎么设，px 都是这么大。

功能简介

单位换算是这件事里最省心的一步。真正拖慢节奏的，是让整套字号守住同一比例、把流式尺寸接顺、以及改造一份满是 px 的旧样式表。于是这些活儿都挪到了换算旁边，切个标签就能做。

  1. 01

    五个单位一起换

    px、rem、em、pt、百分比里随手填一个，其余四个都按你设定的根字号和父级字号即时重算，每一行末尾都有复制按钮。

  2. 02

    把无障碍讲明白

    同一个数值会并排显示在浏览器根字号 16、20、24px 下的样子：rem 随设置放大，px 保持固定，差别无需额外解释。

  3. 03

    模块化字号阶梯

    定一个基准字号，再挑一个比例——大三度、黄金比例都行——设好向上向下各几级，每一级的 px 与 rem 就一并列了出来。

  4. 04

    流式 clamp() 构建

    给最小和最大视口各配一个字号，就能拿到 rem 形式的 clamp()，还附一张折线图，告诉你字号在两个宽度之间怎么过渡。

  5. 05

    整段样式批量改写

    贴进一段 CSS，把其中的 px 一次转换为 rem（反向也可以），并可选择保留 0 和 1px 这类细边框数值。

  6. 06

    输出即拿即用

    字阶导出成 CSS 变量，clamp() 以 rem 给出，批量结果保留你原本的缩进和格式，贴回去就能用。

如何使用

不用离开页面、也不必另开计算器，就能从一次简单换算，走到一套既一致又照顾无障碍的尺寸方案。

  1. 01

    在「单位换算」里设好根字号，任填一个单位的数值，px、rem、em、pt、% 便一起显示出来。

  2. 02

    看一眼无障碍面板，读者若调大浏览器字号，这个数值会放大到什么程度心里就有数了。

  3. 03

    切到「字号阶梯」，定好基准与比例，把生成的各级 rem 复制成 CSS 变量。

  4. 04

    打开「流式 clamp()」，为两个视口填上最小和最大字号，复制得到的 clamp() 表达式。

  5. 05

    进「批量 CSS」，贴上样式表，把所有 px 一次换成 rem，再整段贴回项目。

功能说明

网页上的尺寸，说到底是数值、根字号和读者偏好三者之间的关系。所以这个工具把每一环都摆在明面上，而不是默认所有人都停在固定的 16px。

  • 根字号可调，方便对上那些把根设在 16px 之上或之下的项目
  • em 和 % 另有一个父级字号输入，放在正确的上下文里算，而不是硬套根字号
  • 五个单位实时联动，无论你改的是哪一个，其它四个都跟着更新
  • 无障碍面板把 rem 和 px 摆在读者根字号 16、20、24px 下对照
  • 内置从小二度到黄金比例的八种音阶，一套字号阶梯说来就来
  • 字阶导出为 :root 自定义属性，并在注释里附上对应的像素值
  • 流式 clamp() 带折线图和可拖动的预览宽度，字号怎么涨看得见
  • 批量换算整段 CSS，可选保留 0 和 1px，细边框不会被误伤
  • 每次批量都会告诉你改了多少处，有没有漏改一目了然
  • 换算、字阶、clamp()、批量全在浏览器本地跑，代码不上传、不留存

适合哪些场景

px 转 rem 很少是一锤子买卖。它背后往往跟着一套要维护的字阶、一个要调的流式标题，或一份要现代化的旧样式表——这里每一样都有对应的标签页。

  1. 把设计稿改成 rem

    把设计稿里的像素值换成 rem，让字号和间距跟着读者的浏览器字号设置走，把可访问性照顾到位。

  2. 搭一套字号阶梯

    从一个基准和比例生成一整套协调的字号，再把这些 rem 变量直接塞进设计系统。

  3. 流式响应式标题

    用 clamp() 调一个从手机到桌面缓缓变大的标题，上线前先在任意视口宽度下预览它的确切字号。

  4. 现代化旧样式表

    贴上一份到处写死 px 的旧 CSS，批量换成 rem，同时把细边框和零值原样留下。

  5. 按团队约定统一单位

    设计给的是 px、pt 还是 em，都换成代码库统一采用的那种单位，不必自己心算换算系数。

  6. 给同事讲清楚 rem

    评审时打开无障碍面板，直观说明为什么用 rem 的组件会尊重用户缩放，而用 px 的不会。

  7. 面向非默认根字号

    有些项目故意把根字号设成 62.5% 或别的值，这里把根字号做成可输入项，rem 照样算得准。

  8. 流式的间距与留白

    把同一套 clamp() 思路用到内边距、外边距和网格间隙上，让留白也随视口伸缩，而不只是文字。

延伸阅读

尺寸定了，紧接着就是布局，可以用 Flexbox 与 Grid 布局生成器 把结构搭起来；当这些定好尺寸的元素要移动或过渡时，再用 三次贝塞尔曲线生成器 来打磨节奏，让间距、布局和动效都出自同一套推敲过的体系。

使用建议

几个小习惯，就能让单位选得一致又照顾无障碍，不至于东一块 px、西一块 rem，跟读者的设置对着来。

  • 字号优先用 rem，文字才会尊重读者的浏览器字号和缩放设置。
  • 没有明确理由时，把根字号留在浏览器默认的 16px，避免随意改动。
  • 该随文字一起缩放的间距用 rem，细边框和固定细节这类留给 px。
  • 当一个值应当跟着自身元素的字号走时（比如按钮内边距），改用 em。
  • 字号阶梯锚在一个基准和一个比例上，别逐个组件凭眼睛挑大小。
  • 流式字号交给 clamp()，标题就能随视口自适应，省下一堆媒体查询。
  • 别用 px 设根字号——在某些浏览器里这会让用户缩放失效。
  • rem 数值适度取整，避免把过长小数写进样式表。

边界与注意事项

这个工具专注在 CSS 长度单位以及由它们搭起来的尺寸体系，因此有几处相邻的东西是特意留在门外的。

  • 它换算的是 CSS 长度单位。vw、vh 这类视口单位取决于运行时的屏幕大小，只在流式构建器内部参与建模。
  • 换算沿用标准的 96 DPI 参照，也就是 CSS 里的 1pt 等于 1.333px、1in 等于 96px。
  • 这里的 em 和 % 按单一父级字号计算；真实页面中层层嵌套的继承，叠加起来可能是另一番结果。
  • 批量模式靠文本替换改写 px 和 rem 记号，并不解析完整 CSS，遇到异常或压缩过的输入请复核一遍。
  • 无障碍面板演示的是浏览器字号缩放，并不代替对比度、焦点顺序等其它无障碍检查。
  • clamp() 输出处理的是两个视口之间的线性插值，替代不了在真机上的实测。

常见问题

围绕 px 转 rem、单位取舍，以及怎样在 CSS 里做出无障碍又流式的尺寸，这些是最常被问到的问题。

px 怎么换成 rem？

用像素值除以根字号即可。默认根字号 16px 时，24px 就是 24 ÷ 16 = 1.5rem。在「单位换算」里填任意 px 值，rem 会即时算出来，并采用你设定的那个根字号。

rem 的默认根字号是多少？

浏览器默认 16px，所以只要样式表没改根字号，1rem 就等于 16px。本工具默认也是 16px；如果你的项目覆盖了根字号，可以在这里改成对应的值。

字号该用 rem 还是 px？

字号建议用 rem。rem 会随读者的浏览器字号和缩放一起放大，文字因此保持可访问；px 字号则无视这些偏好。无障碍面板把这层差别直接摆了出来。

rem 和 em 有什么区别？

rem 永远相对根字号，在整个页面里都好预料；em 相对当前元素的字号，会随嵌套一层层叠加。本工具用各自独立的根字号和父级字号输入，把两者分开换算。

rem 又怎么换回 px？

用 rem 值乘以根字号：16px 根字号下，1.5rem 就是 24px。可以在「单位换算」里把基准单位切到 rem，或在「批量 CSS」里选 rem → px，一次换掉整段。

怎么用 clamp() 做流式字号？

打开「流式 clamp()」，给最小和最大视口各设一个字号，复制生成的那段 rem 形式的 clamp()。旁边的折线图会画出字号在这两个宽度之间如何过渡。

能一次把整份样式表从 px 转成 rem 吗？

可以。把 CSS 贴进「批量 CSS」，其中的 px 值会一次性改写成 rem。做 px 到 rem 转换时，你可以保留 0 和 1px，这对不希望跟随文字缩放的细边框很有用。

换算时会不会上传我的代码？

不会。换算、字阶生成、clamp() 计算和批量改写，全在你的浏览器里进行，贴上生产环境的 CSS 或还没发布的设计数值，也都留在本地。

更多相关工具

单位是后续布局的基础。尺寸确定之后，再安排结构、打磨动效，让整个界面保持同一套尺度体系。