使用css viewport单位可实现响应式布局，1vw、1vh、1vmin、1vmax分别对应视口宽、高、较小值、较大值的1%，适用于字体、容器和全屏设计，结合clamp()与媒体查询优化适配效果。
使用 CSS 的 viewport 单位（如 vw、vh、vmin、vmax）可以轻松实现页面布局的自适应，让元素尺寸随视口大小变化而自动调整。这些单位基于浏览器窗口的尺寸，非常适合响应式设计。
viewport 单位的基本含义
viewport 单位表示相对于视口（可视区域）尺寸的比例：
- 1vw = 视口宽度的 1%
- 1vh = 视口高度的 1%
- 1vmin = 视口宽高中较小值的 1%
- 1vmax = 视口宽高中较大值的 1%
例如，在一个 1920px 宽的屏幕上，1vw = 19.2px。
用 vw 控制文本和容器宽度
使用 vw 可以让字体大小或容器宽度随屏幕宽度缩放，适合全屏横幅标题或卡片布局。
立即学习“前端免费学习笔记（深入）”；
示例：让标题在不同设备上保持视觉比例
h1 { font-size: 5vw; /* 字体为视口宽度的 5% */ } .container { width: 90vw; /* 容器占视口宽度的 90% */ margin: 0 auto; }
这样文字和容器会自然适配手机到桌面的不同屏幕。
用 vh 实现全屏高度布局
vh 特别适合创建“一屏一内容”的布局，比如登录页或介绍页。
示例：使一个区块正好占满屏幕高度
.hero { height: 100vh; display: flex; align-items: center; justify-content: center; background: #f0f0f0; }
这样无论设备如何，该区域都会撑满整个视口高度，避免出现空白或滚动条。
结合 vmin/vmax 处理极端屏幕比
在超宽屏或竖屏手机上，仅用 vw 或 vh 可能导致文字过大或过小。使用 vmin 和 vmax 可平衡这种情况。
示例：确保字体在窄屏上不会太小
h2 { font-size: 4vmin; /* 取宽高最小方向的 4% */ }
在手机竖屏时按高度计算，在桌面横屏时按宽度计算，更稳定。
基本上就这些。viewport 单位简单直接，特别适合需要与屏幕尺寸强关联的场景。搭配媒体查询使用，能进一步优化极端情况下的显示效果。注意在字体上使用时，可加 clamp() 限制最小最大值，避免失真。