vw/vh 恒以视口为参照，与父容器无关：首屏全高banner用 height: 100vh 最省事。vmin 取宽高较小者（移动端横屏适配按钮常用），vmax 取较大者。
两个注意：一是移动端 100vh 包含被浏览器 UI 收起前的区域，会出现「底部被工具栏遮住」，现代解法是 100dvh（动态视口高度）；二是 vw 不受用户浏览器字号设置影响，做正文字号时用 rem 而非 vw，可访问性更好。
<style> .hero { height: 100vh; min-height: 320px; background: linear-gradient(135deg,#161b22,#4a9eff); color: #fff; display: flex; align-items: center; justify-content: center; font-size: clamp(20px, 5vw, 44px); } .bar { width: 50vw; height: 24px; background: #f0c33c; margin: 8px; } </style> <div class="hero">100vh 首屏 · 字号 clamp(5vw)</div> <div class="bar">50vw 宽</div>