vw、vh 与百分比单位

视口单位与百分比看起来都是「相对的」，但它们回答的问题不同。

vw 与 vh

• 1vw = 视口宽度的 1%
• 1vh = 视口高度的 1%

在 1440px 宽的视口下：

.hero {
  padding-inline: 5vw; /* 72px */
}

视口单位适合：

• Fluid 水平内边距与 gap
• 随屏幕宽度缩放的全宽区块
• 与 clamp() 组合的英雄区排版

需要注意：

• 移动端浏览器 UI 会改变有效视口高度
• 极小视口下单独使用 vw 可能过大或过小
• 可访问性：仅用 vw 定字号可能在窄屏上过小

百分比单位

50% 相对的是 包含块（containing block），不一定是视口。

.sidebar {
  width: 30%;
}

.card-title {
  font-size: 120%; /* 相对父级字号 */
}

百分比适合：

• 已知容器内的列布局
• 需要填满父级宽度的图片与媒体
• 嵌套排版缩放

同一个 % 在不同属性上可能指父盒宽度或父级字号。

vw vs %

问题	更合适的单位
随屏幕宽度全局缩放	vw
填满父容器	%
带上/下限的排版	用 rem + vw 的 clamp()
卡片内栅格列	% 或 fr

给视口单位加上边界

常见响应式写法：

.section-title {
  font-size: clamp(1.25rem, 0.9rem + 1.5vw, 2rem);
}

正文若只用 vw 往往过于激进。clamp() 提供最小与最大保护。

关键结论

vw/vh 以视口为参考；% 以父盒或父级字号为参考。排版场景应通过 clamp() 把 vw 与 rem 组合使用。

在 CSS 单位换算 / Clamp 生成器 中调整视口宽度，预览 px 如何映射到 vw。