100vh在移动端“短一截”是因为浏览器按含地址栏的初始视口计算，滚动后地址栏收起但值不更新，导致背景裁切、露白边；安卓webview还可能按物理屏高计算，误差更大。
100vh 在移动端为什么总“短一截”
因为浏览器把 100vh 算成初始视口高度（含地址栏），滚动后地址栏收起，真实可视区域变高，但 100vh 值不更新，导致背景被裁、内容露白边。安卓 WebView 甚至可能按物理屏幕高度算，误差更大。
解决办法不是硬扛，而是换思路：
-
html, body { margin: 0; padding: 0; height: 100%; }必须写，否则 Flex/Grid 容器无法继承高度 - 主容器用
min-height: 100vh，既保证初始铺满，又允许内容自然撑高 - 禁用
overflow: hidden——它会掩盖因box-sizing: border-box或border导致的真实溢出
grid-template-areas 断点重写必须整行来
很多人只改 grid-template-columns，却保留原 grid-template-areas: "hero features cta"，结果小屏下单列强行拉宽所有区域，文字挤成一团，背景图错位。
每个断点都要完整重写 grid-template-areas：
- 大屏：
grid-template-areas: "hero 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: relative，否则伪元素的left: 0会相对body定位 - 伪元素加
position: absolute; z-index: -1，避免遮挡链接或 SVG - 宽度写成
width: calc(100vw - 17px)（Windows）或width: calc(100vw - 0px)（macOS） - 水平居中推荐
margin-left: calc(-50vw + 50%)，比transform: translateX(-50%)更稳定
视频背景必须加 muted 和 playsinline
移动端自动播放策略极严：没静音、没内联播放声明，视频大概率被拦截，只留黑块或占位图。
关键属性一个都不能少：
-
muted：强制静音，绕过自动播放限制 -
playsinline：防止 iOS 强制全屏，确保嵌入式播放 - 建议加
autoplay loop，但必须和前两者共存才生效 - 别依赖
poster图当 fallback——某些安卓机连 poster 都不加载，得额外加一层 CSS 背景色兜底
真正卡住人的从来不是“怎么写”，而是“为什么写了没反应”。比如 100vh 失效常被归咎于 CSS 写错，其实是浏览器视口计算机制在作祟；grid-template-areas 错位看起来像语法问题，根源却是断点间语义断裂。这些细节不手动验证一次，很难建立直觉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
