CSS 中什么时候应该用 rem 而不是 px？

字体大小和组件间距应该使用 rem，这样当用户更改浏览器默认字体大小时，布局会按比例缩放。这对无障碍访问至关重要。边框、轮廓线等永远不应该缩放的属性才使用 px。

em 和 rem 有什么区别？

rem（根 em）始终以根元素的字体大小为基准，通常是 16px。em 以当前元素（或其父元素）的字体大小为基准。rem 更可预测，因为它不会级联。em 在嵌套元素中会累积，导致意外的尺寸。

vh 和 vw 单位是如何工作的？

1vh 等于视口高度的 1%，1vw 等于视口宽度的 1%。适合全屏布局和无需媒体查询的响应式尺寸设置。注意：移动浏览器上地址栏会影响 vh，可能导致布局跳动。

CSS 中 100% 是什么意思？

百分比单位相对于父元素同一属性的值。width 的 100% 是父元素宽度的 100%，font-size 的 100% 是继承字体大小的 100%。这种上下文依赖性是 % 容易让人困惑的原因。

有自动转换 CSS 单位的工具吗？

有，我们的 CSS 单位转换器让你输入任意值并选择源单位，即刻显示所有等价值。还可以自定义基础字体大小和视口尺寸，确保转换结果符合实际项目需求。

CSS 单位转换指南：px、rem、em、vh/vw 到底该怎么用

设计稿写的 24px，为什么会出问题

你收到一份 Figma 文件，所有尺寸都是像素 — 字体 24px，内边距 16px，外边距 48px。你把这些值直接复制到 CSS 里。在你自己的电脑上看起来完美无缺。

然后，一位把浏览器默认字体大小调大到 20px 的同事打开了这个页面。你精心设置的 24px 标题还是固定的 24px，而周围的元素却随着比例缩放。原本平衡的排版层级就此崩溃。

这不是罕见的边缘情况，而是把所有值都设为绝对值时的必然结果。解决方法是理解应该在什么时候用哪种单位，并拥有一个能快速完成单位转换的工具。

CSS 单位转换器正是为此而生。但在介绍工具之前，我们先建立正确的认知框架。

CSS 单位速览

CSS 的测量单位比大多数开发者以为的要多。下面是每种单位的实际含义：

px — 像素

大多数人学 CSS 时最先接触的基本单位。1px 在标准分辨率屏幕上对应一个像素点。在高 DPI（视网膜）显示器上，浏览器会按设备像素比进行缩放，实际可能渲染为 2 到 3 个物理像素，但这些计算由浏览器自动处理。

关键特性：px 是固定的，不会响应用户偏好、父元素或文档中的任何其他设置。1px 的边框永远应该是 1px 时，px 是完美选择；但当用户需要更大的文字时，px 就成了问题。

rem — 根 Em

rem 是 "root em" 的缩写。1rem 等于 <html> 元素的字体大小，大多数浏览器的默认值是 16px。关键是，它会响应用户在浏览器中设置的默认字体大小。

如果用户把浏览器默认字体大小设为 20px，页面上所有的 1rem 就都是 20px。整个布局按比例放大。这对无障碍访问是一个重要的优势。

1.5rem 在 16px 基准下是 24px。基准改变，比例不变，结果始终可预测。

em — Em（需要小心的单位）

em 和 rem 类似，但以当前元素的字体大小为基准。没有嵌套时没问题，但一旦开始嵌套元素就会变复杂。

如果一个 font-size: 1.2em 的元素嵌套在同样 font-size: 1.2em 的父元素中，子元素的实际大小就是 1.2 × 1.2 = 1.44em。嵌套三层就是 1.728em。这就是 em 的继承陷阱，下面会详细讲解。

vh / vw — 视口高度和宽度

1vh 等于浏览器视口高度的 1%，1vw 等于视口宽度的 1%。非常适合全屏区域和随屏幕尺寸自适应的流体排版。

注意事项：在移动端，浏览器地址栏有时显示有时隐藏，导致视口高度变化，100vh 的元素高度会随用户滚动而跳变。CSS 工作组新增了 dvh（动态视口高度）来解决这个问题，但浏览器支持还在跟进中。

% — 百分比

百分比的上下文依赖性让即使是有经验的开发者也会困惑。width: 50% 是父元素宽度的 50%。font-size: 120% 是继承字体大小的 120%（行为类似 em）。margin-top: 10% 是包含块宽度的 10%，而不是高度 — 第一次见到这个行为的人几乎都会感到意外。

pt、cm、mm — 打印单位

物理测量单位，在 Web 上几乎只用于打印样式表。1pt 等于 1 英寸的 1/72。普通 Web 样式中几乎不会用到。

理解基础字体大小

很多教程会跳过这一点：浏览器不只是有默认字体大小，而是有用户可以修改的默认字体大小。Chrome、Firefox、Safari 都允许用户在设置中更改。历史上浏览器的默认值是 16px，大多数转换表也以此为基准。

基于这个基准的计算：

1rem = 16px  （浏览器默认值基准）
0.75rem = 12px
1.25rem = 20px
1.5rem = 24px
2rem = 32px

一些设计系统会用 html { font-size: 62.5%; } 把 1rem 设为 10px，让计算更简单（1.6rem = 16px）。这个技巧确实方便，但会悄悄破坏那些假设浏览器默认值的组件，对无障碍访问也没有实质改善。如果你接手了使用这个技巧的代码库，要早点确认清楚。

结论：rem 始终固定在一个值上，因此可以预测。这就是为什么大多数排版和间距决策都应该选 rem。

什么情况用什么单位

字体大小 → rem

永远是 rem。几乎没有好的理由用 px 设置 font-size。

body { font-size: 1rem; }       /* 默认 16px */
h1   { font-size: 2.5rem; }     /* 默认 40px */
h2   { font-size: 2rem; }       /* 默认 32px */
small { font-size: 0.875rem; }  /* 默认 14px */

组件间距 → rem 或 px（取决于意图）

内外边距需要判断。如果间距应该随文本缩放（比如按钮的上下内边距），用 rem。如果是固定的视觉间距（比如图标和文字之间），用 px 也没问题。

.button {
  padding: 0.75rem 1.5rem;  /* 随字体大小缩放 */
  border: 1px solid currentColor;  /* 始终 1px */
  border-radius: 4px;  /* 固定视觉属性 */
}

全屏和视口相对布局 → vh/vw

Hero 区域、占屏幕特定比例的弹窗、固定侧边栏 — 这些用视口单位。记住移动端地址栏问题，如果对移动端全屏体验要求高，考虑使用 dvh。

打印样式 → pt/cm/mm

@media print 块中切换为物理单位，打印机以英寸和点为单位工作。

em 继承陷阱（真实案例）

让我展示 em 在字体大小中为何会变得危险。

假设你在构建一个卡片组件：

.card { font-size: 1.2em; }
.card .meta { font-size: 0.9em; }
.card .meta .timestamp { font-size: 0.85em; }

如果 .card 的父元素 font-size: 16px，实际值是：

.card → 16px × 1.2 = 19.2px
.card .meta → 19.2px × 0.9 = 17.28px
.card .meta .timestamp → 17.28px × 0.85 = 14.688px

这完全不是你想要的结果。没有计算器根本无从调试。

用 rem 改写同样的样式：

.card { font-size: 1.2rem; }
.card .meta { font-size: 0.9rem; }
.card .meta .timestamp { font-size: 0.85rem; }

每个值直接对应根字体大小，无需复杂计算，完全可预测。

em 真正有用的场景：像 line-height: 1.5em 这样需要相对于元素自身字体大小缩放的情况，或者按钮的 padding: 0.5em，让间距随按钮字体大小一起变化。

转换参考表（16px 基准）

px	rem	em（无继承）	pt
10px	0.625rem	0.625em	7.5pt
12px	0.75rem	0.75em	9pt
14px	0.875rem	0.875em	10.5pt
16px	1rem	1em	12pt
18px	1.125rem	1.125em	13.5pt
20px	1.25rem	1.25em	15pt
24px	1.5rem	1.5em	18pt
32px	2rem	2em	24pt
40px	2.5rem	2.5em	30pt
48px	3rem	3em	36pt

这些数值假设 1rem = 16px。如果根字体大小不同，所有转换结果都会改变。这正是工具存在的意义。

CSS 单位转换器的使用方法

CSS 单位转换器解决了静态表格无法处理的问题：基础字体大小不是 16px 时，或者需要精确的 vw 值时。

这个工具可以：

输入数值
选择源单位（px、rem、em、vh、vw、%、pt、cm、mm）
设置基础字体大小（默认 16px，可自定义）
设置视口尺寸（用于 vh/vw 转换）
即刻查看所有等价值

这是我把 Figma 规格（始终是 px）转换为设计系统 rem 值时的标准工作流。输入 px 值，读取 rem 等价值，完成。在 DevTools 里发现布局稍有偏差时，输入 px 值对比预期的 rem 值也很有用。

Tailwind CSS 用户提示

Tailwind 在文档中展示像素值，但内部实际使用 rem。

Tailwind 内部使用 rem。 text-base 是 1rem，text-lg 是 1.125rem，text-xl 是 1.25rem。如果要手动设置 font-size 来匹配 Tailwind 类，用 rem，而不是文档里的像素数值。

间距比例也是 rem。 p-4 是 1rem（默认 16px），p-8 是 2rem（32px）。设计师说的 24px 内边距在 Tailwind 里是 p-6（1.5rem）。需要将特定设计值映射到 Tailwind 类时，转换器很有用。

自定义基础字体大小和 Tailwind 配合良好。 设置 html { font-size: 18px } 后，所有 Tailwind rem 值会自动重新计算。在转换器中把基准设为 18px 来验证你的自定义值。

小结

CSS 单位的选择不是小事，关系到布局能否对所有用户优雅适配。

px — 边框、轮廓线等永远不变的视觉属性
rem — 字体大小和可缩放间距（无障碍访问的基础）
em — 仅在需要相对于元素自身大小缩放时有限使用
vh/vw — 视口相对布局，移动端全屏考虑 dvh
% — 容器相对尺寸（注意 margin 基于宽度的行为）
pt/cm/mm — 仅限打印样式表

把 CSS 单位转换器收藏起来，省去单位换算的时间，把精力放在真正重要的开发工作上。