video是替换元素，固有宽高比由元数据决定，css的aspect-ratio对其无效；必须用容器包裹并设aspect-ratio，再让video绝对定位填满，否则浏览器忽略该声明导致塌陷或裁剪。
aspect-ratio 为什么不能直接写在 video 元素上
浏览器会忽略 video { aspect-ratio: 16 / 9 }，因为 video 是替换元素（replaced element），其固有尺寸由媒体元数据决定，CSS 的 aspect-ratio 对它不生效。开发者工具里能看到该属性状态为 “inactive”，实际高度不会被计算，常表现为视频塌陷成一条细线或上下裁剪。
必须用容器包裹：给 <div class="video-wrapper"> 设 <code>aspect-ratio，再让 video 绝对定位填满它。
- 错误写法：
video { width: 100%; aspect-ratio: 16 / 9; } - 正确结构：
.video-wrapper { width: 100%; aspect-ratio: 16 / 9; position: relative; } .video-wrapper video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } - 若父容器是
flex或grid，需确认子项未被flex-shrink: 1压缩——否则比例失真
SCSS 中写 aspect-ratio 容易踩的格式坑
SCSS 编译后就是原生 CSS，但变量插值稍有不慎就会产出非法值。比如 $ratio: 16/9 直接插进属性，会算出浮点数 1.7777777778，而浏览器只认 16 / 9 或 1.777（等价于 1.777 / 1）。
- ✅ 安全写法：
aspect-ratio: #{$w} / #{$h}（注意/两侧有空格） - ❌ 失效写法：
aspect-ratio: #{$w}/#{$h}（无空格）、aspect-ratio: #{$w} /#{$h}（空格位置错） - ⚠️ 不要依赖
@function返回浮点数再拼接，如@return #{$h / $w * 100}%这类逻辑只适用于padding-top降级方案，不适用于aspect-ratio - 分数写法比小数更可靠——
16 / 9无精度误差，1.777在极端缩放下可能偏差
如何用 SCSS 封装带降级的响应式纵横比容器
不能靠 SCSS 自动加 fallback，得手动组织 @supports + @media + mixin。现代浏览器走 aspect-ratio，旧浏览器（Safari ≤15.4、Firefox ≤89）回退到 padding-bottom 技巧。
- 核心结构：先写
@supports (aspect-ratio: 1/1)块，里面放现代方案；外面平级写降级规则（含position: relative、height: 0、padding-bottom） - SCSS 函数辅助降级：
@function aspect-percentage($w, $h) { @return ($h / $w) * 100%; }，用于生成padding-bottom: 56.25% - 断点切换比例时，不要只改
aspect-ratio的值，而是用@media包裹整个声明块——旧浏览器不支持该属性，改值毫无意义 - 务必加
box-sizing: border-box，否则边框或内边距会让实际尺寸超标
为什么父容器没设 width 时 aspect-ratio 会失效
aspect-ratio 的计算依赖至少一个方向可自动推导，而「自动推导」的前提是父容器提供了明确的可用宽度。如果父级是 display: inline-block 且没设 width，或嵌套在未设宽的 flex 项中，aspect-ratio 可能坍缩为 0 或撑满视口。
- ✅ 必须显式设置容器宽度：
width: 100%、max-width: 600px或flex: 1（配合min-width: 0防收缩） - ❌ 同时设
width: 300px和height: 200px→aspect-ratio被完全跳过 - ⚠️
height: 100%通常无效——它需要父级有明确高度，而纵横比容器本身高度正是待计算的，容易形成循环依赖 - 真正难调试的是嵌套场景：比如
grid子项里再套aspect-ratio容器，需逐层检查父级是否提供了可测量宽度
