PX 转 REM 转换器

本工具可将像素（px）值转换为 CSS 中的 rem 单位。rem 单位始终相对于根元素的 font-size（即 html 元素），因此成为响应式、无障碍设计的首选单位。设置你的根字号，输入一个像素值，等价的 rem 便会即时显示，可直接粘贴到样式表中。

多数浏览器将根字号设为 16px，因此 16px = 1rem。如果你的项目更改了 html 的 font-size，请在设置中相应更新基准。

开发者为何选择 REM

响应式缩放

在媒体查询中更改一处根字号，整个布局便按比例缩放——无需逐个元素修改。

无障碍

rem 尊重用户浏览器的字号偏好，因此对于需要更大字体的读者，文字和间距会随之增大。

可预测的尺寸

由于 rem 在嵌套时从不叠加，同一个值在页面任何位置都代表相同含义。

如何将 PX 转换为 REM

1

设置根字号

在基准字号字段中输入你项目的根（html）font-size。默认值为 16px，即浏览器的标准基准。

2

输入像素值

选择 px 单位标签，输入要转换的像素值。rem 等价值会随输入实时更新。

3

读取结果

rem 值会即时出现在结果面板中，并附带 em 和 px 等价值。使用小数位数设置来控制取整精度。

4

复制到你的 CSS

点击 rem 结果旁的复制按钮，直接粘贴到样式表中。

公式：rem = px ÷ 根字号。例如，24px ÷ 16px = 1.5rem。

REM、PX 与 EM

选择合适的单位取决于你想要固定尺寸还是随上下文响应的尺寸。下面是三种单位的对比。

单位	相对于	随用户设置缩放	最适合
px	无（绝对）	否	边框、阴影、细线
rem	根字号	是	排版、布局、间距
em	父元素字号	是	组件级局部尺寸

最佳实践：字号、外边距和内边距使用 rem，让界面完全可缩放；将 px 留给永远不应变化尺寸的元素，例如 1px 边框。

常见 PX 转 REM 换算

以下参考值假设根字号为 16px。在工具中调整基准即可为其他任意根设置重新计算。

像素	REM（根 16px）	典型用途
12px	`0.75rem`	说明文字、小字
14px	`0.875rem`	次要文字、标签
16px	`1rem`	正文基准
18px	`1.125rem`	舒适的阅读字号
24px	`1.5rem`	分节标题
32px	`2rem`	页面标题

常见问题

基准字号是什么，为什么重要？

它是用来计算 rem 的根（html）font-size。浏览器默认将其设为 16px，所以 1rem 通常等于 16px。如果你的 CSS 设置了不同的根字号，请将此字段改为该值以获得准确的换算。

px 是如何转换为 rem 的？

用像素值除以根字号：rem = px ÷ 根。根为 16px 时，24px 即为 1.5rem。本工具会即时计算，并按你选择的小数位数进行取整。

就无障碍而言，rem 比 px 更好吗？

通常是的。由于 rem 随浏览器字号偏好缩放，提高默认文字大小的用户会获得按比例放大的界面。固定的 px 值会忽略该偏好，可能损害可读性。

元素嵌套时 rem 会叠加吗？

不会。与 em 不同，rem 始终参照根字号，因此无论元素嵌套多深，同一个 rem 值都渲染得完全一致。这种可预测性正是 rem 最大的优势之一。

转换是在我的浏览器中完成的吗？

是的。计算完全在客户端随输入进行。没有任何数据上传到服务器，因此结果即时呈现，页面加载后即可离线使用。

PX 转 REM 转换器