vw vh 与视口单位
vw / vh 相对视口宽 / 高：100vw = 视口宽度。它们的好处是“天然自适应”——元素随屏幕等比缩放，不需要媒体查询。缺点是太极端：100vw 在超宽屏上会超额放大。
常见用法：英雄区高度 100vh、间距 4vw、配合 clamp() 限制字号上下限。注意移动端 100vh 会包含地址栏高度，可用 100dvp（动态视口）替代。
- 1vw = 视口宽度的 1%，与设备无关
- vmin = 较小的那个视口维度，适合做正方形元素
- 100vh 手机上会随地址栏伸缩，新方案是 dvh / dvi
CSS
/* 英雄区：至少占一屏 */ .hero { min-height: 100vh; display: grid; place-items: center; } /* 间距随屏幕呼吸 */ .section { padding: 6vh 5vw; } /* 正方形头像：vmin 保证横竖屏都是正方形 */ .avatar { width: 20vmin; height: 20vmin; border-radius: 50%; } /* 移动端动态视口：地址栏出现/隐藏时高度不跳变 */ .full { height: 100dvh; }
本节要点vw/vh 天然自适应但需兜底：大屏用 clamp 限幅，移动端高度用 dvh。
