aspect-ratio 不能直接作用于 元素，因其为替换元素，宽高比由视频元数据决定，css 的 aspect-ratio 被浏览器静默忽略；必须用块级容器包裹，设置 width 和 object-fit 才能稳定控制尺寸与比例。
aspect-ratio 不能直接写在 <video></video> 上——写了也白写，浏览器会静默忽略。必须用块级容器包裹，配 width 和 object-fit，否则高度塌陷、横竖屏错位、CLS 跳动全都会发生。
为什么 video { aspect-ratio: 16 / 9 } 完全没反应
<video></video> 是替换元素（replaced element），它的宽高比由视频文件元数据决定，CSS 的 aspect-ratio 不参与其盒模型计算。DevTools 里该声明常被标为 “inactive”，computed height 是 auto 或 0px。这不是你漏写了什么，是规范行为。
常见现象：页面加载瞬间视频只显示一条细线，或宽度正常但高度为 0；Safari 15.4–16.3 在 flex 容器中还有额外 bug，导致比例彻底崩坏。
必须同时满足的三要素
稳定生效的最小组合就这三项，缺一不可：
-
.video-wrapper必须是块级容器：display: block或display: grid（避开 Safari flex bug） -
.video-wrapper上写：width: 100%（或max-width: 800px等明确宽度约束） +aspect-ratio: 16 / 9（注意斜杠前后各一个空格） -
<video></video>本身要移除所有 HTMLwidth和height属性（如width="640"），并设：width: 100%+height: 100%+object-fit: cover（或contain） - 务必加
overflow: hidden到 wrapper，防止object-fit: cover失效时内容溢出
移动端兼容性与降级方案
iOS Safari 15.4+、Chrome Android 100+、Firefox Android 102+ 才原生支持 aspect-ratio；低于这些版本（比如 iOS 15.2）会完全忽略该声明，导致容器塌缩。不能只测最新 Chrome，真机连 iOS 15.2 都得跑一遍。
实操建议：
- 用
@supports (aspect-ratio: 1 / 1)包裹现代样式，降级方案写在外部 - 旧版兜底用
padding-top: 56.25%+position: relative/absolute，注意别写成56%或56.2%——少一位小数就偏形 - 若项目仍需支持 IE 或极老安卓 WebView，就得回退到 JS 方案，纯 CSS 不够用
aspect-ratio 必须配合 width 才生效
aspect-ratio 只定义比例，不决定尺寸。单独写 aspect-ratio: 16 / 9 而无宽度约束，容器可能塌成一条线或无限拉伸。
正确写法：
-
width: 100%; aspect-ratio: 16 / 9：容器随父级变宽，高度自动撑开 -
max-width: 100vw; aspect-ratio: 16 / 9：防超宽溢出视口 - 避免同时设
height和aspect-ratio，后者会被忽略 - Flex/Grid 布局中要额外加约束：
flex-shrink: 0或min-height: 0，防止隐式规则干扰比例计算
真正容易被忽略的是：当父容器宽度由 vmin、clamp() 或 flex 基础尺寸动态决定时，aspect-ratio 依然有效，但它依赖的是最终计算出的宽度值；一旦宽度变成 0 或未触发重排（比如 display: none 时），比例也就无从谈起。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
