全屏响应式布局需规避100vh在移动端的视口计算缺陷，改用min-height: 100vh并清理高度继承链；grid-template-areas须按断点完整重写；伪元素全宽背景需减去滚动条宽度；视频背景必加muted、playsinline和poster。
全屏响应式布局不是加个 height: 100vh 就能跑通的，尤其在移动端，它大概率会截断、错位或留白——根本原因是视口高度在滚动/地址栏收起后不重算，而继承链和盒模型没清理干净。
为什么 100vh 在手机上经常“不够高”
浏览器把 100vh 算作初始视口（含地址栏）高度，但用户一滚动，地址栏收起，真实可视区域变高，100vh 值却卡死不动。安卓 WebView 甚至可能直接按物理屏幕高度算，导致严重缩水。
- 改用
min-height: 100vh，既保证初始铺满，又允许内容撑高不裁剪 - 必须设
html, body { margin: 0; padding: 0; height: 100%; }，否则 Grid/Flex 容器无法继承高度 - 禁用
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），直接使用会导致意外水平滚动条，用户得左右拖拽才能看到完整内容。
立即学习“前端免费学习笔记（深入）”；
- 伪元素必须设
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
移动端 Safari 和多数 Android 浏览器默认禁止自动播放有声视频，且会强制全屏播放，不加这两个属性，video 标签要么静音黑屏，要么弹出全屏遮盖内容。
-
<video muted playsinline autoplay loop></video>是最低可用组合 - 务必加
poster属性作为加载前占位图，避免白屏 - 背景视频建议用
object-fit: cover+min-height: 100vh，别依赖height: 100vh
真正难的不是写多少媒体查询，而是每次换设备都得重新验证高度继承链是否干净、滚动条是否干扰了 vw 计算、以及伪元素有没有意外遮住可点击区域——这些细节一旦漏掉，全屏效果就垮了一半。
