全屏响应式背景排版需确保容器高度继承链干净、背景脱离文档流、断点语义一致；100vh在移动端易失效，应改用min-height: 100vh并重置html/body；grid-template-areas须每断点完整重写；伪元素全宽背景需减去滚动条宽度；视频背景必加muted和playsinline。
全屏响应式背景排版布局不是靠“撑满”就能成的，关键在容器高度继承链是否干净、背景渲染是否脱离文档流干扰、以及断点切换时布局语义是否保持一致。直接给 body 加 background-size: cover 在多数简单场景下能用，但一旦涉及多区域分区、内容超长、滚动条干扰或移动端地址栏缩放，就会出错。
为什么 height: 100vh 在移动端常失效
浏览器的 100vh 是按初始视口（含地址栏）计算的，页面滚动后地址栏收起，视口实际变高，但 100vh 值不会重算，导致容器高度“缩水”，背景被截断。更糟的是，某些安卓 WebView 会把 100vh 当作整个屏幕物理高度，而非可视区域。
- 必须设
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 必须减去滚动条宽度
100vw 包含垂直滚动条所占空间（Windows 常为 17px，macOS 隐藏时可视为 0），直接使用会导致水平滚动条意外出现，用户左右拖拽才能看到完整内容。
- 伪元素必须设
position: absolute+z-index: -1，避免遮挡链接或 SVG - 父容器需
position: relative，否则left: 0会相对body定位 - 宽度写成
width: calc(100vw - 17px)（Windows）或calc(100vw - 0px)（macOS），不能只写100vw - 水平居中用
margin-left: calc(-50vw + 50%)，比transform: translateX(-50%)更稳定
视频背景必须加 muted 和 playsinline
现代浏览器（尤其 iOS Safari）禁止自动播放有声视频，不加 muted 会导致视频黑屏、静音图标卡住；不加 playsinline 则在移动端强制全屏播放，破坏布局。
#backgroundVideo { position: fixed; top: 0; left: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; }-
<video autoplay muted loop playsinline></video>缺一不可 - 务必提供
<source></source>的type="video/mp4"，并备一张poster图片作为加载失败时的 fallback
真正难的不是让背景“看起来全屏”，而是当用户缩放页面、切到分屏模式、打开开发者工具、或者在 Safari 的地址栏收起/展开瞬间，布局仍能稳住——这些细节藏在 html 的重置、vh 的取舍、vw 的滚动条补偿和 grid-area 的断点同步里，漏掉任意一环，视觉就垮了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
