最推荐用 aspect-ratio: 16 / 9 配合 width: 100% 和 height: auto 实现响应式宽高比，兼容现代浏览器；不支持时用 padding-top: 56.25% + 绝对定位兜底；务必移除 video 的 width/height 属性，用 CSS 控制尺寸与 object-fit。
用 aspect-ratio 最直接，但得看浏览器支持情况
现代 CSS 里，aspect-ratio 是解决这个问题最干净的方式：它让容器（比如 <video> 的父元素）主动维持宽高比，不管屏幕怎么变。但注意，aspect-ratio: 16 / 9 在 Safari 15.4+、Chrome 88+、Firefox 89+ 才稳定支持；旧版 Safari 或 IE 完全不认。
实操建议：
- 优先给
<video>外层套一个<div class="video-wrapper">，而不是直接设在<video>上——因为部分浏览器对替换元素（如<video>）应用aspect-ratio有兼容问题 - 写成
aspect-ratio: 16 / 9，别写16:9或小数（如1.777），后者不合法 - 配合
width: 100%和height: auto，确保它能随父容器缩放
不支持 aspect-ratio 时，用 padding-top 百分比技巧兜底
这是个老但稳的办法：利用 padding-top 的百分比值是相对于宽度计算的特性，撑出固定比例的空白高度，再用绝对定位把视频“塞”进去。它兼容到 IE9，且不依赖 JS。
常见错误现象：padding-top: 56.25% 写成 56% 或 56.2% ——16:9 对应的是 9 / 16 = 0.5625，少一位小数就偏形。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 父容器设
position: relative，内层<video>设position: absolute; top: 0; left: 0; width: 100%; height: 100% -
padding-top: 56.25%必须写在父容器上，且父容器不能有height值，否则会压垮 padding 计算 - 如果视频需要居中或留边，别动
padding-top，改用margin或外层容器控制
<video> 自身的 width 和 height 属性要不要设？
不要设。HTML 中的 width 和 height 是固有尺寸（intrinsic size），设了反而干扰响应式行为，尤其在移动端可能触发横向滚动或裁切。
使用场景：只在极少数需要 fallback 到非 CSS 渲染（比如邮件客户端或老旧阅读器）时才保留，日常 Web 开发中删掉更安全。
实操建议：
- 删掉
<video width="640" height="360">这类属性 - 用 CSS 控制尺寸：比如
video { width: 100%; height: auto; } - 如果要强制等比缩放，加
object-fit: contain（保持完整）或object-fit: cover（填满裁边）
响应式断点下还要额外处理吗？
一般不用。只要用了 aspect-ratio 或 padding-top 技巧，比例本身是守恒的；但「显示效果」是否合理，取决于内容区域宽度变化带来的实际像素尺寸。
性能 / 兼容性影响：在超小屏（比如 iPhone SE）上，16:9 容器可能只剩不到 300px 宽，此时视频画质、字幕可读性会下降——这不是比例问题，而是设计尺度问题。
实操建议：
- 用
@media (max-width: 480px)降低max-width或调整外边距，避免视频贴边太紧 - 如果视频含文字信息（比如教程字幕），考虑在小屏下切换为
object-fit: contain并加背景色，防止黑边吞噬可读区域 - 别在不同断点里反复改
aspect-ratio值——16:9 就是 16:9，改了就不是 16:9 了
最易被忽略的一点：视频源本身的分辨率和编码参数，会影响缩放后的清晰度。CSS 控制的是容器比例，不是画质。哪怕容器完美 16:9，源文件是 480p 拉伸到 4K 屏，照样糊。
