应使用 dvh/dvw 替代 vh/vw 解决全屏下 fixed 元素偏移问题；dvh 自动排除地址栏等可折叠 UI，Chrome 105+、Firefox 112+、Safari 16.4+ 已支持，兼容方案可用 @supports 或 fullscreenchange 动态设置 CSS 变量。
全屏模式下 fixed 元素位置偏移，本质是浏览器在进入全屏（requestFullscreen）后，viewport 尺寸未及时反映状态栏、地址栏、工具栏的隐藏或显示变化，导致基于 vh/vw 的计算仍按“非全屏”视口进行，而 position: fixed 又严格相对于当前 viewport 布局——二者错位就发生了。
用 dvh/dvw 替代 vh/vw
Chrome 105+、Firefox 112+、Safari 16.4+ 已支持动态 viewport 单位：dvh（dynamic viewport height）自动排除地址栏/底部导航栏等可折叠 UI；dvw 同理适用于宽度方向。
- 原写法（易偏移）：
top: 20vh; - 推荐写法（自适应）：
top: 20dvh; - 兼容处理：可用
@supports (height: 100dvh)做渐进增强
监听全屏状态并手动更新样式
当 dvh 不可用或需精确控制时，可在 fullscreenchange 事件中读取 document.documentElement.clientHeight 动态设置 CSS 变量：
使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。
- JS 中：
document.addEventListener('fullscreenchange', () => {
const h = document.documentElement.clientHeight;
document.documentElement.style.setProperty('--full-height', `${h}px`);
});- CSS 中：
.my-fixed {
top: calc(var(--full-height) * 0.2); /* 20% 高度 */
}避免依赖固定像素值做“视觉居中”
比如用 top: 50%; transform: translateY(-50%) 在全屏下也可能不准——因为 50% 是相对于初始 viewport 高度计算的，而全屏后元素尚未重排。
- 改用
inset+margin或flex容器更稳定 - 若必须用 transform，建议搭配
resize事件二次校准 - 对关键按钮/提示层，可加
will-change: top提升渲染优先级
基本上就这些。核心是别把 vh 当“绝对真实高度”用，尤其在全屏、横竖屏切换、PWA 地址栏收起等场景——dvh 是目前最轻量可靠的解法，不复杂但容易忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
