min-width: 100vw 和 min-height: 100vh 比 width: 100% 更稳，因为后者在 position: fixed 下依赖初始包含块，而 iOS Safari 等浏览器中该块可能含地址栏导致视口计算偏差；前者强制视频至少撑满整个视口宽高，配合 object-fit: cover 和 display: block 可实现无白边、无滚动、不拉伸的全屏覆盖效果。
video加min-width: 100vw和min-height: 100vh为什么比width: 100%更稳
因为width: 100%在position: fixed下是相对于初始包含块（initial containing block），而这个块在某些移动端浏览器里可能不等于视口——比如 iOS Safari 会把地址栏高度算进100vh，导致底部留白或滚动条。用min-width: 100vw和min-height: 100vh能强制视频至少撑满整个视口宽度和高度，再配合object-fit: cover裁剪，视觉上真正“无死角覆盖”。
常见错误现象：width: 100%; height: 100%在 iPhone 竖屏下顶部/底部出现白边，或者触发横向滚动条。
-
min-width和min-height让尺寸有“底线”，不会被父容器收缩挤压 - 必须搭配
width: auto; height: auto，否则会破坏宽高比，导致拉伸 - 别在
body上直接设height: 100vh——它不可靠；优先控制video自身尺寸
为什么object-fit: cover必须加在video元素上，而不是父容器
object-fit只对替换元素生效（、），加在父容器上完全无效。很多开发者误以为“给容器设cover就能控制子元素”，结果视频还是变形或留黑边。
使用场景：你希望视频像background-image: cover一样铺满，但又需要原生video的播放控制能力（比如loop、preload）。
- 必须显式写
display: block，否则 Safari 下object-fit可能不触发 - 移动端 iOS 12 以下需补
-webkit-object-fit: cover - 如果视频原始比例严重偏离视口（如 9:16 竖屏视频放桌面端），
cover必然裁切——这不是 bug，是设计行为
移动端自动播放失败时，muted和playsinline缺一不可
Chrome、Safari、Firefox 都强制要求：带音频的自动播放必须由用户手势触发。背景视频几乎全是静音播，所以muted不是可选项，是硬性前提。而playsinline防止 iOS Safari 强制跳转全屏原生播放器——一旦跳转，video就脱离页面布局，fixed 定位失效，背景效果直接崩掉。
错误信息如DOMException: play() failed because the user didn't interact with the document first就是典型提示。
-
autoplay属性必须存在，但单独写它没用；muted和playsinline必须同时出现 - 安卓 WebView 可能仍拦截，建议加
loop并配oncanplay="this.play()"兜底 - 部分老机型需
webkit-playsinline兼容写法
z-index: -1失效的真正原因不是数值太小，而是层叠上下文被意外创建
很多人给video设了z-index: -1却发现文字还是被遮住，甚至视频浮在最上面。根本问题不在 z 值本身，而在父容器或兄弟元素悄悄创建了新的层叠上下文——比如加了transform、opacity: 0.99、will-change或filter，这些都会让z-index: -1被截断，失去“沉到底部”的效果。
性能影响：层叠上下文越多，渲染重排开销越大，尤其在低端安卓机上容易卡顿。
- 最稳妥做法：给
video设position: fixed; z-index: -1，同时给内容区域显式设z-index: 1 - 检查
body或html是否被无意加了transform（比如某些 UI 框架的动画类） - 避免用
opacity做遮罩——改用background: linear-gradient()更轻量且不影响层叠
真正难的不是写几行 CSS，而是理解object-fit和position: fixed在不同浏览器中如何协同计算尺寸，以及静音策略如何绕过越来越严的 autoplay 限制。这些细节一旦漏掉一个，整页背景视频就在某个机型上彻底失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
