px 转 rem 怎么算:CSS 单位换算与 em 区别详解

写 CSS 时,px 直观,但越往后越会发现它和"读者怎么看页面"是脱节的。rem 把尺寸交还给根字号,响应式和无障碍都靠它兜底。这篇把 px 与 rem 的互转、为什么选 rem、以及 em 那个容易踩的叠加坑,一次讲清楚。

px 和 rem 的换算公式

rem 是相对单位,基准是 html 根元素的 font-size。浏览器默认根字号是 16px,所以默认情况下:

1rem = 16px。

互转就是一道除法和一道乘法:

px 转 rem:rem 值 = px 值 ÷ 根字号
rem 转 px:px 值 = rem 值 × 根字号

举个具体的。设计稿标了一个 24px 的小标题,根字号是默认的 16px,那么 24 ÷ 16 = 1.5,写进 CSS 就是 1.5rem。反过来,看到别人代码里 1.5rem,16 × 1.5 = 24px,心里就有数了。常见档位记住几个就够用:12px = 0.75rem,16px = 1rem,24px = 1.5rem,32px = 2rem,所有主流框架都认这套数。

数字一多,心算容易错,直接用 px rem 换算器实时联动更稳,输 px 出 rem,改根字号三个字段一起重算。

为什么用 rem 不用 px

核心理由只有一个:rem 跟随用户的根字号设置,px 不跟随。

很多人不知道,浏览器设置里可以改默认字号。一个老花眼的读者把手机浏览器默认字号从 16 调到 20,如果你的正文、行高、间距都用 rem,整页会等比放大,字清晰、间距协调,阅读体验立刻好起来。同一个页面如果写死 px,无视这个设置,字还是那么小,该眯眼还得眯眼。

这就是无障碍的分水岭。正文、标题、行高、内外边距,这些跟阅读舒适度相关的尺寸,默认用 rem。真正需要固定大小的地方,比如 1 物理像素的细线、边框、阴影,再用 px,这些本来就不该跟着字号缩放。

响应式同理。整套尺度都挂在根字号上,你想全局收紧或放大,改一个 html 的 font-size,所有 rem 跟着动,不用一个个媒体查询去抠。

rem 和 em 到底差在哪

这是最容易混的地方。两个都是相对单位,但参照物不同:

rem 始终相对 html 根字号,值固定可预测
em 相对最近父级的计算 font-size,会一层层叠加

叠加这件事得拿数字说话。假设一个卡片 .card { font-size: 1.25rem },根字号 16px,那卡片字号就是 20px。你在卡片里写 padding: 1.25em,这个 em 不是按根字号算的,而是按父级的 20px 算:1.25 × (1.25 × 16) = 25px,不是你以为的 20px。

这个叠加在组件内部是优势:标题里塞一个徽章,徽章用 em,会自动跟着标题大小走。但在布局里是坑:嵌套列表一层套一层,每层都乘一遍,字会无限放大。所以经验上 em 适合组件级缩放,布局尺寸交给 rem。

媒体查询是另一个细节。em 在断点里始终按浏览器默认解析,@media (min-width: 48em) 在 16px 默认浏览器里就是 768px 触发,还能跟用户缩放走,稳定性比 px 好。

我自己的迁移经验

接手过一个写死 px 的后台,正文清一色 14px、16px 写死。有用户反馈"字太小看着累",我才意识到那批 px 完全无视了浏览器字号设置。当时的做法是把所有正文相关的 px 值导出成一个列表,丢进批量换算,拿到 base 16 下的 px 转 rem 对照表,再整批替进 CSS。改完那天我把浏览器默认字号调到 20 自测,整页平滑放大,没有一处错位,那一刻才真正信了 rem 这套。边框和阴影我特意留着 px,它们本来就该固定。

base 字号不是 16 的情况

不是所有项目根字号都是 16。有的设计系统交付时把 html 设成 18px,这时所有换算的基准就变了。同样写 1.5rem,18 × 1.5 = 27px,而不是 24px。算之前一定先确认根字号,不然每个结果都偏。

还有个流传很广的"62.5% 黑魔法":html { font-size: 62.5% } 让 1rem = 10px,rem 算起来确实顺(1.6rem = 16px)。但它的副作用是破坏了用户的字号偏好,无障碍角度并不推荐,现在的主流建议是根保留 16,该算就算,或者直接用工具换。

需要顺手做点别的单位换算时,单位换算器能补上长度、重量、温度这些日常场景,和 px rem 这种 CSS 专用换算配着用刚好。

小结

px 转 rem 就是除以根字号,rem 转 px 就是乘回去,默认 1rem = 16px。选 rem 是为了让尺寸跟随用户字号,把响应式和无障碍一起接住;em 和 rem 的区别在参照物,em 按父级叠加,组件内用着顺,布局里要当心。记住几个常用档位,剩下的交给换算器,比心算可靠。

Made by Toolora · Updated 2026-06-13