CSS 单位转换指南：px、rem、em、vw、vh 详解

选择正确的 CSS 单位是编写样式表时最具影响力的决策之一。你选择的单位决定了元素如何在不同屏幕尺寸间缩放、如何响应用户偏好（如浏览器字体大小设置）以及布局的可预测行为。然而，许多开发者出于习惯默认使用像素，错过了相对单位提供的灵活性和无障碍优势。本指南涵盖了所有主要 CSS 单位，解释了何时使用每种单位，展示了如何在它们之间转换，并提供了现代响应式设计的实用最佳实践。

理解 CSS 单位分类

CSS 单位分为两大类：绝对单位和相对单位。绝对单位具有固定的物理大小，而相对单位从另一个参考点派生其计算值。理解这一区别是做出明智单位选择的基础。

绝对单位

绝对单位是固定大小的度量。Web 开发中最常用的绝对单位是像素 (px)。其他绝对单位包括点 (pt)、厘米 (cm)、毫米 (mm) 和英寸 (in)。这些单位主要用于打印样式表或当你需要不随上下文变化的度量时。在基于屏幕的 CSS 中，px 是你唯一会经常使用的绝对单位。

相对单位

相对单位基于参考值计算其最终值。em 相对于当前元素的字体大小，rem 相对于根元素的字体大小，vw 和 vh 相对于视口尺寸，百分比相对于父元素。相对单位是响应式和无障碍设计的基石，因为它们允许你的布局自动适应不同的上下文。

像素 (px)：基准单位

像素是最直观的 CSS 单位，因为它直接映射到屏幕像素（在设备像素比方面有一些注意事项）。px 值无论上下文如何都始终相同，这使其可预测且易于理解。然而，这种可预测性是有代价的：基于像素的尺寸在用户更改浏览器默认字体大小时不会缩放，这会创建无障碍问题。

何时使用 px

• 边框宽度：1px 边框无论字体大小设置如何都应保持 1px。
• 盒阴影：阴影偏移和模糊半径通常最好使用像素以获得一致的视觉效果。
• 细粒度细节：任何缩放会破坏视觉设计的值，如细线分隔符或精确的图标定位。
• 根字体大小：设置 html { font-size: 16px; } 作为基线是常见模式，不过你应该尊重用户的浏览器默认值。

何时避免 px

避免使用 px 作为字体大小、内边距、外边距和应适应用户偏好的布局尺寸。将浏览器字体大小增加到 20px 的用户期望所有文本相应缩放，但基于 px 的字体大小不会响应此变化。

rem：根相对尺寸

) 的字体大小。在大多数浏览器中，默认根字体大小为 16px，因此 1rem = 16px，0.5rem = 8px，2rem = 32px。rem 的关键优势是它在用户更改浏览器默认字体大小时会缩放，使其成为无障碍的最佳选择。

将 px 转换为 rem

转换公式很简单：将像素值除以根字体大小。

rem = px / root-font-size

// With default root font size of 16px:
12px = 12 / 16 = 0.75rem
16px = 16 / 16 = 1rem
24px = 24 / 16 = 1.5rem
32px = 32 / 16 = 2rem
48px = 48 / 16 = 3rem

62.5% 技巧

许多开发者发现除以 16 的数学运算很繁琐。一种流行的技巧是将根字体大小设置为 62.5%，使 1rem 等于 10px。这简化了心算：14px 变为 1.4rem，24px 变为 2.4rem，以此类推。

html {
    font-size: 62.5%; /* 1rem = 10px */
}

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

h1 {
    font-size: 3.2rem; /* 32px */
    margin-bottom: 1.6rem; /* 16px */
}

em：上下文相对尺寸

em 单位相对于当前元素的字体大小（或对于 font-size 以外的属性，相对于其父元素）。这意味着 1em 等于当前字体大小，em 值在元素嵌套时会复合。这种复合行为既可能强大也可能令人困惑。

复合问题

/* Parent: font-size 16px */
.parent {
    font-size: 1em; /* 16px */
}

/* Child: 1.2em of parent's 16px = 19.2px */
.child {
    font-size: 1.2em;
}

/* Grandchild: 1.2em of child's 19.2px = 23.04px */
.grandchild {
    font-size: 1.2em;
}

每个嵌套元素都会乘以字体大小，导致指数增长。这就是为什么 rem 通常更适合字体大小。然而，em 在你想要组件级缩放的特定用例中表现出色。

何时使用 em

• 组件内边距和外边距：当你希望间距随组件字体大小缩放时，em 使一切保持比例。如果你增加按钮的字体大小，其内边距会自动缩放。
• 媒体查询断点：一些开发者偏好基于 em 的断点，因为它们随用户字体大小偏好缩放，确保布局在适当的内容宽度处适配。
• 组件内的图标大小：以 em 为大小的图标与周围文本按比例缩放。

视口单位：vw、vh、vmin、vmax

视口单位相对于浏览器窗口尺寸。1vw 等于视口宽度的 1%，1vh 等于视口高度的 1%。vmin 是 vw 和 vh 中较小的一个，vmax 是较大的一个。这些单位对于创建响应可用屏幕空间的布局至关重要。

常见视口单位用例

移动端 vh 问题

在移动浏览器上，100vh 并不总是等于可见视口高度。浏览器的地址栏和导航控件占用空间，但 100vh 包含这些控件后面的区域。这导致全高区域底部内容被截断。现代 CSS 提供了 dvh（动态视口高度）作为解决方案，它考虑了动态工具栏。或者，使用 JavaScript 基于 window.innerHeight 设置 CSS 自定义属性。

/* Modern approach */
.hero {
    height: 100dvh; /* Dynamic viewport height */
}

/* Fallback for older browsers */
.hero {
    height: 100vh;
    height: 100dvh;
}

新视口单位：svh、lvh、dvh

CSS 引入了三个新的视口高度单位来解决移动端视口问题：

• svh（小视口高度）：所有浏览器 UI 可见时的视口高度（地址栏展开）。
• lvh（大视口高度）：浏览器 UI 最小化时的视口高度（地址栏收起）。
• dvh（动态视口高度）：当前视口高度，随浏览器 UI 展开或收起而变化。

宽度（svw、lvw、dvw）和最小/最大单位（svmin、lvmin、dvmin 等）也存在相同的小/大/动态变体。移动端全屏布局使用 dvh，需要保证内容无需滚动即可显示时使用 svh，想要填充最大可能空间时使用 lvh。

使用 clamp() 实现流式排版

CSS clamp() 函数是响应式排版的游戏规则改变者。它接受三个值：最小值、首选值和最大值。浏览器选择首选值，但将其限制在最小值和最大值之间。

/* Font size scales from 1rem to 2.5rem based on viewport */
h1 {
    font-size: clamp(1rem, 2.5vw + 0.5rem, 2.5rem);
}

/* Padding scales proportionally */
.container {
    padding: clamp(1rem, 3vw, 3rem);
}

这种方法为你提供了基于视口缩放的好处，而没有文本在移动端变得太小或在桌面端变得太大的风险。它消除了字体大小对媒体查询断点的需求，显著降低了 CSS 复杂性。

转换参考表

将此表作为常见转换的快速参考。所有值假设 16px 根字体大小和 1920x1080 视口。

CSS 单位最佳实践

• 使用 rem 作为字体大小：这是最重要的规则。基于 rem 的字体大小尊重用户偏好并在整个应用中一致缩放。
• 使用 em 作为组件间距：组件内的内边距和外边距受益于 em，因为它们在组件字体大小变化时按比例缩放。
• 使用 px 作为边框和细粒度细节：不应随字体大小缩放的值（如 1px 边框和阴影偏移）应使用像素。
• 使用百分比作为布局宽度：弹性布局使用基于百分比的列和容器宽度，允许内容在不同屏幕尺寸间重排。
• 使用视口单位作为全屏元素：主视觉区域、叠加层和任何应填充视口的元素受益于 vh 和 vw。
• 使用 clamp() 实现流式排版：用 clamp() 替代字体大小的媒体查询断点，在最小和最大值之间创建平滑缩放。
• 永远不要用 px 设置根 font-size：始终使用百分比（如 62.5%）或保持浏览器默认值。用像素设置会覆盖用户的无障碍偏好。
• 保持一致：为项目选择单位策略并坚持使用。随机混用单位使代码库更难维护和调试。