结论是：用 min-height: 100dvh + display: grid + grid-template-rows: 1fr 是当前最稳的全屏幻灯片切换基础结构，因 100vh 在 ios safari 滚动时会错位，100vw 无法控制高度，且 height: 100vh 因地址栏动态变化导致计算时机问题而引发闪动或留白，必须配合 html/body 清除默认边距及兜底 js 兼容旧版。
直接说结论：用 min-height: 100dvh + display: grid + grid-template-rows: 1fr 是当前最稳的全屏幻灯片切换基础结构，100vh 在 iOS Safari 滚动时会错位，100vw 单独用无法控制高度，不能只靠它。
为什么 height: 100vh 在幻灯片里经常“闪一下”或底部留白
这不是 Grid 写错了，是 100vh 的计算时机问题。iOS Safari 在地址栏收起/展开瞬间会改变视口高度，但 CSS 不重排，导致幻灯片容器高度卡在旧值上。用户一滚动，就看到内容被裁切或底部突然多出空白。
- 现象包括：首屏加载正常，滚动后第二张幻灯片只显示上半截；返回顶部再下拉，又恢复正常
- 安卓部分 WebView 也有类似问题，尤其 PWA 模式下
- 别指望
resize事件能及时捕捉——它常被节流，且不触发重绘 - 真正该用的是
100dvh（dynamic viewport height），Chrome 105+、Safari 16.4+、Firefox 114+ 都已支持
Grid 容器必须设 min-height: 100dvh，而不是 height
height: 100dvh 在旧版 Safari（如 iOS 15.4 以下）可能被忽略，而 min-height 兼容性更好，且能防止内容超长时被截断。
- 必须同步清空
html和body的默认margin和padding，否则 Grid 容器拿不到完整高度 - 正确写法：
html, body { margin: 0; padding: 0; height: 100%; }，再给幻灯片容器设min-height: 100dvh - 如果项目要兼容 iOS 15.3 及更早版本，加一段兜底 JS：
document.body.style.minHeight = `${window.innerHeight}px`，并在resize时更新 - 不要对幻灯片容器设
overflow: hidden——它会掩盖因高度计算错误导致的溢出，让调试变难
幻灯片项怎么用 Grid 排列才不会错位
每张幻灯片应作为 Grid 的一个行轨道，而不是靠 position: absolute 堆叠。用 grid-template-rows: repeat(n, 1fr) 是最干净的方式，前提是容器高度已锁定为 100dvh。
- 若用
grid-template-rows: 100vh 100vh 100vh，视口变化时三张图会同时缩放，容易错位；1fr则始终均分可用空间 - 想加导航栏？改用
grid-template-rows: 60px repeat(n, 1fr)，第一行固定，其余自动适应剩余高度 - 避免混用
px和rem定义轨道——字体缩放会间接影响rem值，导致列宽突变 - 移动端横竖屏切换时，
grid-template-areas必须重定义，不能只调尺寸；否则语义和视觉会脱节
背景图与内容分离时，伪元素比直接设 background-image 更可靠
直接在幻灯片项上写 background-image，一旦区域高度为 auto 或受 1fr 动态影响，背景可能不渲染、偏移或模糊。
- 正确做法：给幻灯片项加
position: relative，再用&::before绘制背景层，z-index: -1 - 示例：
&::before { content: ""; position: absolute; inset: 0; background: url(...) center/cover; z-index: -1; } - 禁用
background-attachment: fixed——Grid 容器中 Safari 表现极不稳定，容易导致滑动卡顿 - 如果要用渐变网格线做背景，
background-image: linear-gradient()必须配合background-size精确匹配grid-template-columns计算出的单元格尺寸，否则缩放失真
真正卡住人的从来不是 Grid 语法，而是 html/body 的 margin 是否清干净、容器是否真的占满视口、以及 100dvh 兜底逻辑有没有覆盖到旧浏览器。这三个点漏掉任意一个，幻灯片在某个设备上就会突然“跳帧”或“塌半截”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
