aspect-ratio 在 flex 子项上大概率不生效，因 min-width: auto 和 align-items: stretch 会覆盖比例计算；需同时设置 min-width: 0、width: 100%、aspect-ratio: 16 / 9 才能生效。
直接写 aspect-ratio 在 flex 子项上大概率不生效——不是你代码写错，而是 flex 布局的默认行为（比如 min-width: auto、align-items: stretch）会覆盖比例计算逻辑。
flex 子项上 aspect-ratio 失效的根本原因
浏览器只在「宽度可测 + 高度未锁定」时才用 aspect-ratio 推导高度。而 flex 子项默认带 min-width: auto，它会阻止子项收缩到由比例算出的高度；再加上父容器 align-items: stretch（默认值）强行拉伸高度，aspect-ratio 就被彻底跳过。
-
min-width: auto是罪魁祸首：哪怕子项宽度是 100%，只要没显式覆盖这个值，浏览器就认为“不能比内容窄”，比例推导直接失效 -
flex: 1或flex: 0 1 auto会激活min-width: auto，进一步锁死缩放空间 - 父容器设了
height或max-height，也会让子项高度失去弹性，aspect-ratio被忽略 - DevTools 里看到
aspect-ratio被划掉？基本可判定是上述某条冲突触发了静默丢弃
必须写的三行关键样式
只加 aspect-ratio 不够，这三条缺一不可：
-
min-width: 0：解除 flex 默认对最小宽度的保护，让比例能真正参与计算 -
width: 100%（或max-width: 100%）：提供明确宽度基准，否则比例无从推导高度 -
aspect-ratio: 16 / 9（注意空格分隔，不是16:9或1.777）：语法错误会导致解析失败
示例：
.card {
min-width: 0;
width: 100%;
aspect-ratio: 16 / 9;
}
遇到 flex 容器本身是 row 方向时的额外处理
如果父容器是 display: flex; flex-direction: row，且子项要等比缩放（比如卡片网格），光靠上面三行还不够：
- 加
flex-shrink: 0：防止窄屏下被挤压变形（尤其当其他兄弟项内容更长时） - 避免同时设
height和aspect-ratio：哪怕只写height: auto，也会让浏览器放弃比例推导 - 若子项内含
video或img，务必用div包裹再设aspect-ratio，别直接写在替换元素上 - 不要依赖
@supports (aspect-ratio: 1/1)来包裹这些样式——旧版 Chrome（≤87）、微信 X5、UC 等连@supports都不支持，整块规则会被跳过
比 aspect-ratio 更稳的 fallback 方案
当目标环境包含大量旧 WebView（如微信、QQ 浏览器内嵌页），别赌 @supports 覆盖率。直接用 padding-top 百分比方案，它从 IE6 起就稳定：
- 先写降级：
padding-top: 56.25%（对应 16:9），父容器加position: relative - 内容层用
position: absolute; inset: 0填满，再加overflow: hidden - 然后用
@supports (aspect-ratio: 1/1)外置覆盖：padding-top: 0; aspect-ratio: 16 / 9; - 顺序不能反：fallback 必须在前，
@supports必须在后，否则不支持者拿不到任何高度
真正容易被忽略的是：flex 子项的 min-width: auto 不是“建议设置”，而是现代浏览器中 aspect-ratio 生效的硬性前提——漏掉它，其他所有样式都白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
