像素转rem指南 — 一次弄懂CSS单位换算，从此不再困惑

打开设计稿，上面写的是font-size: 18px、padding: 24px、margin: 32px。切换到代码编辑器，脑子里开始盘算：这些该换成rem吗？还是直接用px？

这个困惑几乎每个前端开发者都经历过。搞清楚px、rem、em的使用场景之后，写CSS会变得清晰许多。

为什么需要rem

CSS单位分为绝对单位和相对单位。px是绝对单位——屏幕上的一个像素点，不受任何其他因素影响。

rem是相对单位，全称"root em"，以HTML文档根元素（html标签）的字体大小为基准。浏览器默认根字体大小为16px，因此在没有自定义的情况下：

• 1rem = 16px
• 0.875rem = 14px
• 1.5rem = 24px
• 2rem = 32px

"这不就是除以16，用计算器一样能算，为什么要用rem？"

答案是可访问性。

部分用户会在浏览器设置中调大默认字体，有些人会设置到20px甚至更大。如果页面用px写死了所有尺寸，这些个人设置就被彻底无视了。如果用rem，页面会跟随用户的字体设置等比例缩放，保持设计意图。

这也是Web内容无障碍指南（WCAG）的要求：文字大小应该支持用户调整。rem是满足这一要求最自然的方式。

三种单位的使用场景

应该用rem的地方：

• font-size（正文、标题、按钮文字）
• margin、padding（布局间距）
• width、max-width（容器宽度）
• gap（网格和弹性布局间距）

应该用px的地方：

• border-width（1px solid是经典写法）
• box-shadow的模糊值和扩散值
• outline的细节
• 装饰性图标的固定尺寸

谨慎使用em的场景：

• 组件内部相对于自身字体大小的间距（如按钮padding: 0.5em 1em）
• 媒体查询的断点（让断点跟随用户缩放级别）

em以父元素字体大小为基准，嵌套时容易产生意想不到的复合效果。除非明确需要这种效果，否则rem更安全。

换算公式和常用对照表

基本公式很简单：

rem值 = px值 ÷ 根字体大小

以默认16px为基准的常用换算：

px值	rem值
12px	0.75rem
14px	0.875rem
16px	1rem
18px	1.125rem
20px	1.25rem
24px	1.5rem
32px	2rem
40px	2.5rem
48px	3rem
64px	4rem

常用的几个值记熟之后，其余的查表或用工具更高效。

PixelRemConverter的使用方法

打开PixelRemConverter，界面很直接：

1. 输入px值 — 在输入框中填入设计稿上的像素值，rem换算结果立即显示
2. 设置基准字体大小 — 默认16px，可以改成项目实际使用的根字体大小
3. 查看换算表 — 工具提供常用尺寸的对照表，方便批量查询
4. 反向换算 — 支持从rem换算回px，双向都能查

实际开发中，把这个工具开在旁边，看一眼设计稿，查一下对应rem值，效率提升明显。

从设计稿到CSS的实际转换示例

假设设计稿给出以下数值：

• 卡片标题：font-size: 24px
• 正文：font-size: 14px
• 卡片内边距：padding: 20px
• 边框：border: 1px solid

转换成CSS：

.card-title {
  font-size: 1.5rem;   /* 24px */
}

.body-text {
  font-size: 0.875rem; /* 14px */
}

.card {
  padding: 1.25rem;    /* 20px */
  border: 1px solid #e2e8f0; /* px保留 */
}

边框保持1px不变——因为我们希望边框始终是1个像素细，不受字体大小影响。这种一致的判断标准，让代码库更容易维护。

响应式设计中的实际价值

rem的另一个优势是，改变根字体大小就能影响整个页面的比例。这让响应式设计的实现更加简洁：

html {
  font-size: 14px; /* 移动端稍小 */
}

@media (min-width: 1024px) {
  html {
    font-size: 16px; /* 桌面端恢复标准 */
  }
}

所有用rem写的间距、字体大小都会跟随根字体等比例调整，无需为每个元素单独写媒体查询。

关于62.5%技巧

前端社区里流行的一种做法是将html的font-size设为62.5%，使根字体变为10px（16 × 62.5% = 10），这样rem计算就变成了"除以10"：

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem; /* = 16px */
}

24px就是2.4rem，14px就是1.4rem，计算直观。

但这个方法有一个问题：如果用户在浏览器里将字体大小调大（比如从16px改成20px），62.5%就不再是10px了（变成12.5px），与预期不符。对于强调可访问性的项目，保持默认16px基准，直接除以16更可靠。

相关工具

CSS单位转换器 — 覆盖vw、vh、em、%等更多CSS单位的换算。

CSS边框圆角生成器 — 可以直接用rem指定圆角大小。

总结

px和rem没有绝对的对错，关键是根据用途做合适的选择：需要跟随用户字体设置缩放的用rem，不需要缩放的视觉细节用px。

建立这个判断标准之后，从设计稿到CSS的转换就有了清晰的规则。PixelRemConverter处理换算的机械部分，判断用哪个单位的逻辑则掌握在你手里。