video元素需同时设置max-width: 100%和height: auto以实现等比缩放；现代推荐用aspect-ratio: 16/9配合width: 100%；Flex容器中应加flex: 0 1 auto或套容器避免撑开；移动端须设min-height保障控件可操作性。
video 元素必须加 max-width: 100% 和 height: auto
单独写 max-width: 100% 不足以让视频真正自适应——它只限制了最大宽度，但浏览器仍按原始分辨率渲染高度，容易溢出或留白。加上 height: auto 后，高度才会随宽度等比缩放，维持原始宽高比。
常见错误现象：
-
video { width: 100%; }→ 拉伸变形，尤其在非标准比例容器中 -
video { max-width: 100%; }→ 高度卡死，小屏下顶部/底部大片留空 - 父容器没设
width或max-width→ 视频“找不到参照”，缩放失效
现代方案优先用 aspect-ratio，别再靠 padding-bottom 算百分比
aspect-ratio: 16 / 9 是目前最简洁可靠的宽高比控制方式，配合 width: 100% 就能自动推算高度，无需伪元素、绝对定位或 JS 计算。
使用条件：
立即学习“前端免费学习笔记（深入）”；
- Chrome 88+、Firefox 89+、Safari 15.4+ 支持（2026 年已覆盖绝大多数用户）
- 旧版 Safari 可加
-webkit-aspect-ratio，但兼容性不稳定，建议降级为外层容器 +padding-bottom: 56.25%方案 - 避免对
video元素本身设height: 100%—— 它会覆盖aspect-ratio，导致拉伸
Flex 容器里 video 被撑开？加 flex: 0 1 auto 或套一层容器
当 video 直接放在 display: flex 的父容器中，即使写了 max-width: 100%，也常被默认的 min-width: auto 拉满整行，破坏比例。
两个实操解法：
- 给
video加flex: 0 1 auto：不放大、可缩小、基准尺寸为内容固有尺寸 - 更稳做法：用
<div class="video-container"><video></video></div>，让容器承担 flex 占位职责，video只管自身响应式 - 千万别在 flex 子项里混用
width: 100%和max-width: 100%—— 前者会赢，直接覆盖自适应逻辑
移动端控件太小点不到？min-height 比 min-width 更关键
max-width: 100% + height: auto 能保比例，但 iPhone SE 竖屏下视频可能缩到 320px 宽，控件图标随之变小，手指误触率飙升。
这时不能只盯宽度，得干预高度下限：
- 加
min-height: 180px（或根据实际测试值调整），确保控件有基本可操作空间 - 若需更精细控制，用媒体查询单独处理窄屏：
@media (max-width: 400px) { video { min-height: 200px; } } - 注意：不要对
video设min-width，它会和max-width: 100%冲突，反而在小屏强制撑开
