什么是 PX 转 REM 计算器？
PX 转 REM 计算器是一款将像素（px）值换算为 rem 单位的工具。在 CSS 中，rem 是相对于根元素（html）字号的相对单位。掌握这种换算，是打造响应式、易访问网页的关键——页面才能在不同屏幕尺寸和用户偏好下都正确缩放。
什么时候需要用 PX 转 REM 计算器
在以下场景中，PX 转 REM 计算器会派上用场：
- 开发响应式网站时，需要让元素在各种设备上按比例自动缩放
- 制作无障碍设计时，需要尊重用户在浏览器中设置的字号偏好
- 将现有设计从绝对单位（像素）改写为相对单位（rem），以便后续维护
如何计算 PX 转 REM
像素转 rem 的公式为：
rem = px ÷ 根字号
其中：
- rem 是换算后得到的 rem 单位数值
- px 是你要换算的像素值
- 根字号是根元素的基准字号（大多数浏览器默认为 16px）
示例
Advertisement
示例一：将标题字号从像素换算为 rem
在默认根字号 16px 下，将 24px 的标题字号换算为 rem。
| 输入 | 计算过程 | 结果 |
|---|---|---|
| 像素值：24px 根字号：16px |
24 ÷ 16 | 1.5rem |
示例二：使用自定义根字号换算外边距
在自定义根字号 20px 下，将 40px 的外边距换算为 rem。
| 输入 | 计算过程 | 结果 |
|---|---|---|
| 像素值：40px 根字号：20px |
40 ÷ 20 | 2rem |
示例三：换算较小的内边距值
在默认根字号 16px 下，将 8px 的内边距换算为 rem。
| 输入 | 计算过程 | 结果 |
|---|---|---|
| 像素值：8px 根字号：16px |
8 ÷ 16 | 0.5rem |
常用像素转 REM 对照表
下面是一份常用像素值换算为 rem 的速查表（按标准根字号 16px 计算）：
| 像素 | REM |
|---|---|
| 4 px | 0.25 rem |
| 8 px | 0.5 rem |
| 12 px | 0.75 rem |
| 14 px | 0.88 rem |
| 15 px | 0.94 rem |
| 16 px | 1 rem |
| 18 px | 1.12 rem |
| 20 px | 1.25 rem |
| 24 px | 1.5 rem |
| 25 px | 1.56 rem |
| 32 px | 2 rem |
| 40 px | 2.5 rem |
| 48 px | 3 rem |
| 56 px | 3.5 rem |
| 64 px | 4 rem |
| 80 px | 5 rem |
| 300 px | 18.75 rem |
用 REM 替代像素的好处
Advertisement
在 CSS 中使用 rem 单位有以下几大优势：
- 无障碍体验更好：rem 会随用户在浏览器中设置的字号一起缩放
- 响应式更简单：只需在媒体查询中调整根字号即可
- 各元素之间的缩放更加一致统一
- 元素之间保持比例关系，代码更易维护
相关计算器
你可能还会用到以下相关计算器：
