响应式页眉高度不能只用 height: 100vh，因其忽略地址栏、状态栏等动态变化的安全区；应使用 env(safe-area-inset-top, 0px) 配合 calc() 和 CSS 变量实现弹性适配，或选用兼容性渐进的 dvh 单位。
响应式页眉高度为什么不能只靠 height: 100vh
因为 100vh 是视口高度，不考虑地址栏、系统状态栏（尤其 iOS Safari 滚动时会隐藏/显示）、PWA 安装横幅等真实可用空间变化。直接写死高度会导致页眉在某些设备上被截断或留白过多。
真正要响应的不是“屏幕”，而是“当前可用内容区域”。CSS 变量配合 env() 和 calc() 才能动态适配：
-
--safe-area-inset-top是系统级安全区变量，iOS/Android WebView 均支持，值如44px（刘海/状态栏高度） -
env(safe-area-inset-top)可读取该值，但需 fallback（旧浏览器不支持） - 页眉高度应基于这个值做弹性伸缩，比如：固定内边距 + 动态顶部安全区补偿
怎么用 CSS 变量定义可调节的页眉高度
核心是把高度拆成「基础高度」+「安全区补偿」两部分，用 var() 控制权重：
:root {
--header-base-height: 64px;
--header-safe-offset: env(safe-area-inset-top, 0px);
}
<p>.header {
height: calc(var(--header-base-height) + var(--header-safe-offset));
padding-top: var(--header-safe-offset);
}</p>
这样做的好处：
- 安卓/桌面端：
--header-safe-offset为0px，页眉就是纯64px - iOS Safari：滚动时
env(safe-area-inset-top)自动更新（如从44px→0px），高度实时收缩 - 变量可被 JS 修改：
document.documentElement.style.setProperty('--header-base-height', '56px')，适合主题切换
常见错误：env() 不生效或计算异常
这不是 CSS 写错了，而是环境或语法卡点：
- 没加 fallback：必须写
env(safe-area-inset-top, 0px)，漏掉, 0px在不支持环境会整个声明失效 - 父容器有
overflow: hidden或transform，导致env()值无法继承到子元素（建议直接作用于:root或.header自身） - 在
@media (prefers-reduced-motion: reduce)下某些 UA 会禁用env()动态更新，需额外监听resize事件兜底 - 使用
vh混合env()要小心：例如calc(100vh - env(safe-area-inset-top))在 iOS 上可能因地址栏变化导致抖动，不如用dvh（动态视口单位）
要不要用 dvh 替代 vh + env()
要，但得看兼容性。Chrome 105+、Safari 16.4+、Firefox 114+ 支持 dvh（dynamic viewport height），它天生包含安全区，无需手动加减：
.header {
height: calc(10dvh + 48px); /* 10% 的可用高度 + 基础高度 */
}
不过目前仍需降级：
- 不支持
dvh的浏览器会忽略整条声明，所以必须写 fallback：height: 64px; height: calc(10dvh + 48px); -
dvh在 iOS Safari 中对「地址栏收起」的响应有约 100ms 延迟，视觉上略滞后，关键交互场景建议仍用env()主控 - SSR 渲染时服务端无法获取
dvh，首屏可能错乱，需配合useEffect或DOMContentLoaded重设
实际项目里，env() 更可控，dvh 更简洁——选哪个取决于你是否愿意为新特性承担兼容成本和边缘抖动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
