必须用width: 100vw; height: 100vh;配合object-fit: cover和overflow: hidden实现无拉伸无黑边全屏视频背景，小屏需@media降级为静态图或关闭视频。
直接用 @media 套 object-fit: cover + 视口单位，就能让视频背景在不同分辨率下不拉伸、不留黑边、不卡顿——但关键在于断点选择和降级策略，不是堆样式。
video 元素必须用 vw/vh 而不是 %
用 width: 100% 和 height: 100% 会受父容器限制，一旦父容器没设高（比如 height: auto），视频就塌缩或溢出。必须用视口单位强制撑满：
-
width: 100vw+height: 100vh是基础，确保始终覆盖整个可视区 - 如果页面有固定 header 或 footer，用
height: calc(100vh - 80px)更稳妥，避免遮挡内容 - 不要给
video设max-width或min-height，它们会干扰object-fit的裁剪逻辑
object-fit: cover 是核心，但得配 overflow: hidden
object-fit: cover 本身只控制视频如何缩放填充，不处理“超出部分是否可见”。常见错误是视频上下/左右被裁掉后，边缘仍能拖动或显示滚动条：
- 必须给 video 的父容器（比如
.video-background）加overflow: hidden - 避免对
video自身设position: absolute后忘记父容器position: relative，否则裁剪区域错位 - 在 iOS Safari 上，
object-fit对autoplay muted loop视频支持稳定，但若漏了muted，视频会静音且可能触发暂停
用 @media 降级比适配更重要
大屏播高清视频没问题，但小屏（尤其是低端安卓机）容易卡顿、发热、耗电。这时候响应式不是“怎么让视频更好看”，而是“什么时候该关掉它”：
立即学习“前端免费学习笔记（深入）”；
- 在
max-width: 768px断点里直接display: none视频，换一张background-image静态图 - 别用
min-device-width，它检测的是设备物理像素，而现代浏览器缩放、DPR 会让这个值失真；坚持用max-width（CSS 像素） - 如果必须保留视频，至少把
src换成更小分辨率的 MP4（如 720p → 480p），通过 JS 动态切换source或服务端 User-Agent 判断
移动端自动播放的兼容性陷阱
即使写了 autoplay muted loop，iOS 和部分 Android 浏览器仍可能不触发播放，表现为黑屏或首帧静止：
- 必须确保
video在 DOM 加载完成且用户有交互（如点击）后才调用play()，否则会被静音拦截 - 用
preload="metadata"替代preload="auto"，减少初始加载压力 - 测试时别只看 Chrome DevTools 的 device mode，真机连上 Safari Web Inspector 才能看到实际
play()是否被拒绝，错误信息是NotAllowedError: play() can only be initiated by user gesture
最易被忽略的点：视频背景的 z-index 往往需要配合 fixed 定位和 transform 层叠上下文，否则在某些安卓 WebView 中会被其他元素遮盖——这不是样式问题，是渲染层顺序问题。
