必须设 html, body { margin: 0; padding: 0; height: 100% }，主容器用 min-height: 100vh，每个断点重写 grid-template-areas，伪元素宽度减滚动条，视频加 muted 和 playsinline。
直接用 body { background-size: cover } 能凑合，但一上真机（尤其 iOS 或安卓 WebView）就出问题：背景被截、滚动条错位、小屏文字挤成一团——根本原因是没管好高度继承链和视口计算偏差。
为什么 100vh 在移动端经常“不够高”
浏览器的 100vh 是按页面加载瞬间的视口（含地址栏）算的。滚动后地址栏收起，实际可视区域变高，但 100vh 值不会刷新，导致容器高度“缩水”，背景图下半截直接消失。某些安卓 WebView 甚至把它当成物理屏幕高度，误差更大。
- 必须设
html, body { margin: 0; padding: 0; height: 100% }，否则 Grid/Flex 容器无法继承高度 - 主容器改用
min-height: 100vh，既保证初始铺满，又允许内容撑高不裁剪 - 禁用
overflow: hidden——它会掩盖因box-sizing或border导致的真实溢出
grid-template-areas 分区时必须重写整行
很多人只在 @media 里改 grid-template-columns，却保留原 grid-template-areas: "hero features cta"，结果小屏下单列强行拉宽所有区域，文字挤成一团，背景图错位。
- 每个断点都要完整重写
grid-template-areas，例如小屏改为"hero" "features" "cta" - 子元素的
grid-area值（如hero）不能带引号，且大小写必须与grid-template-areas中的一致 - 区域高度为
auto时背景可能不显示，需配合min-height: 100vh或aspect-ratio: 16/9
伪元素全宽背景要减去滚动条宽度
100vw 包含垂直滚动条所占空间（Windows 常为 17px，macOS 隐藏时可视为 0），直接使用会导致意外水平滚动条，用户左右拖拽才能看到完整内容。
- 伪元素必须设
position: absolute+z-index: -1，避免遮挡链接或 SVG - 父容器需
position: relative，否则left: 0会相对body定位 - 宽度写成
width: calc(100vw - 17px)（Windows）或width: calc(100vw - 0px)（macOS），不能只写100vw - 水平居中用
margin-left: calc(-50vw + 50%)，比transform: translateX(-50%)更稳定
视频背景必须加 muted 和 playsinline
iOS Safari 和多数安卓 WebView 默认禁止自动播放有声音的视频，muted 是硬性要求；playsinline 防止视频在全屏模式下跳出页面，破坏布局流。
-
<video autoplay muted loop playsinline></video>缺一不可 - CSS 中
#bg-video { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -1000; } - 别用
height: 100vh—— 同样受视口计算偏差影响，坚持用min-height: 100vh
真正卡住人的不是语法，而是高度继承链是否干净、伪元素是否偷占滚动条宽度、以及每个断点里 grid-template-areas 是否真的重写了——漏掉其中任意一个，都会让“全屏”在某个机型上突然失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
