video 直接设 width: 100% + height: auto 不行，因它是替换元素，height: auto 在各浏览器解析不一致，易致塌陷、留白或变形；单独 width: 100% 还会破坏宽高比，小屏下控件缩至不可点。
video 直接加 width: 100% + height: auto 为什么不行？
因为 video 是替换元素（replaced element），浏览器对它的 height: auto 解析不一致：有的按 intrinsic size（原始分辨率）撑高，有的按行内基线对齐，结果常是高度塌陷、上下留白，或拉伸变形。单独写 width: 100% 更危险——它会强制填满父容器，无视比例约束，小屏下可能把控件缩到无法点击。
现代方案：用 aspect-ratio 作用于容器，不是 video 标签本身
直接给 video 加 aspect-ratio: 16 / 9 在部分 Safari 和旧版 Chrome 中表现不稳定，尤其当视频带 controls 或 poster 时容易错位。稳妥做法是把比例控制交给外层容器：
.video-wrapper { aspect-ratio: 16 / 9; max-width: 100%; }.video-wrapper video { width: 100%; height: 100%; object-fit: cover; display: block; }- 确保
video标签不带原生width或height属性（比如width="1920"），否则会覆盖 CSS 计算 - 若视频源比例不统一（如混用 4:3 和 16:9），可用语义类区分：
class="video-wrapper ratio-4x3"+.ratio-4x3 { aspect-ratio: 4 / 3; }
兼容老浏览器：padding-bottom 技巧仍是最稳 fallback
当项目需支持 iOS 14.5 以下或 Android 4.4 WebView 时，aspect-ratio 不可靠，必须降级。核心是利用 padding-bottom 百分比值基于父宽计算的特性：
- 外层容器设
position: relative; width: 100%; padding-bottom: 56.25%; height: 0;（16:9 → 9 ÷ 16 × 100%） -
video设position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; - 用
contain可完整显示，但可能有黑边；用cover无黑边但可能裁剪边缘 - 注意：该方法在 flex 容器中也稳定，不会被
flex: 1拉伸破坏比例
Flex 布局里 video 自适应失效的典型原因
当 video 直接作为 display: flex 子项时，即使写了 max-width: 100%，也常被默认的 min-width: auto 锁死宽度，导致无法缩小。这不是 CSS 写错了，而是 flex 布局优先级更高：
- 临时解法：给
video加flex: 0 1 auto;（不放大、可缩小、基准为内容尺寸） - 推荐解法：外层套
div.video-wrapper，让容器承担 flex 占位职责，video只管自身响应式 - 绝对不要同时写
width: 100%和flex: 1—— 二者冲突时，width通常胜出，反而破坏弹性 - 特别留意 iPhone SE 竖屏（375px 宽）下控件尺寸：此时
max-width: 100%虽保比例，但播放按钮可能只剩 8px 高，得靠@media (max-width: 375px) { video { min-height: 44px; } }强制兜底
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
