视口单位是CSS3引入的相对长度单位，它们相对于浏览器窗口（视口）的尺寸来计算。主要包括四种：vw（视口宽度的1%）、vh（视口高度的1%）、vmin（vw和vh中较小的那个）、vmax（vw和vh中较大的那个）。例如在1920×1080的屏幕上，1vw = 19.2px，1vh = 10.8px，1vmin = 10.8px，1vmax = 19.2px。

vw（Viewport Width）是视口宽度的1%，适合用于需要随屏幕宽度缩放的元素，如全宽横幅、字体大小随宽度变化等。vh（Viewport Height）是视口高度的1%，适合全屏布局、垂直居中的元素、首屏占满视口等场景。例如height: 100vh可以创建一个恰好占满屏幕高度的区域，常用于Hero区域或全屏滚动页面。

vmin取vw和vh中的较小值，即视口较短边的1%。vmax取vw和vh中的较大值，即视口较长边的1%。

vmin特别适合确保元素在横屏和竖屏下都保持可见。例如在手机上，竖屏时宽度较小，横屏时高度较小，使用vmin可以保证元素始终适应较短的边，常用于正方形的响应式元素。
vmax适合让元素充分利用屏幕的较长边，例如全屏背景图的覆盖尺寸。
举例：在375×812的手机上，1vmin = 3.75px（基于宽度375），1vmax = 8.12px（基于高度812）。旋转手机后，vmin和vmax的值会互换。

百分比(%)是相对于父元素的尺寸计算的，而视口单位是相对于浏览器窗口（视口）的尺寸计算的。这意味着：
• 一个width: 50%的元素宽度取决于其父容器的宽度
• 一个width: 50vw的元素宽度始终是视口宽度的一半，与父元素无关
视口单位更适合需要脱离文档流层级限制、直接响应屏幕尺寸的场景，如全屏遮罩、固定定位元素、或跨层级的尺寸控制。

移动端使用视口单位时需要特别注意：
• iOS Safari地址栏：滚动时地址栏会收缩/展开，导致视口高度动态变化，使用100vh可能导致内容被地址栏遮挡。解决方案包括使用dvh（动态视口高度，较新）或JavaScript计算实际可用高度。
• 软键盘：移动端输入框聚焦时弹出的软键盘会改变视口高度，可能影响基于vh的布局。
• 横竖屏切换：旋转设备时vw和vh会互换，vmin和vmax也会相应变化。建议使用vmin来保证元素在横竖屏下的一致性。
• 推荐使用svh/lvh/dvh（CSS新规范中的小视口/大视口/动态视口高度单位）以获得更精确的控制。

使用视口单位可以实现流畅的字体缩放，无需媒体查询断点：
• font-size: calc(16px + 1vw) — 基础16px，随屏幕宽度线性增长
• 使用clamp()函数限制最小最大值：font-size: clamp(14px, 2vw, 24px)，确保字体在14px到24px之间随视口宽度变化
• 这种方法比传统的@media断点更平滑，没有突兀的跳跃感，在现代响应式设计中非常流行。

在大多数情况下100vw = 视口宽度，但有一个常见陷阱：滚动条宽度。在Windows等系统中，浏览器默认的垂直滚动条会占用视口宽度（通常约15-17px），但100vw包含滚动条的宽度。这意味着如果页面有垂直滚动条，设置width: 100vw的元素会比视口实际可用宽度略宽，导致出现水平滚动条。解决方案是使用width: 100%（相对于父元素）或overflow-x: hidden。较新的CSS规范引入了svw/lvw/dvw来区分是否包含滚动条，但兼容性尚在发展。