直接用@mixin ratio-container就能生成兼容fallback的视频容器，它自动处理aspect-ratio与padding-top双写法、percentage($h/$w)计算及box-sizing校验，但必须在选择器内调用且子元素需absolute定位填满。
直接用 @mixin ratio-container 就能生成兼容 fallback 的视频容器
SCSS 里不需要手算 56.25% 或硬写媒体查询——一个带参数的 mixin 就能同时输出现代 aspect-ratio 和传统 padding-top 方案。关键不是“有没有 mixin”，而是它是否自动处理降级逻辑和单位校验。
-
@mixin ratio-container($w: 16, $h: 9)必须接受宽高两个参数，不能只传比例字符串（如"16/9"），否则无法参与除法计算 - 内部要同时写
@supports (aspect-ratio: #{$w} / #{$h})和 fallback 块，不能只留一种写法 - 必须用
percentage($h / $w)算 padding 值，写成$h / $w * 100%会因运算优先级出错（SCSS 先算$h / $w得小数，再乘%无效） - 别漏掉
box-sizing: border-box：padding 会撑开容器，border-box 才能保证 width: 100% 不被撑爆
@include ratio-container 调用时必须套在有选择器的规则块里
这个 mixin 不是函数，不返回值，而是注入 CSS 规则。调用位置错了，编译后就什么都不会输出。
- ✅ 正确：
.video-wrapper { @include ratio-container(4, 3); } - ❌ 错误：
@include ratio-container(4, 3);（顶层调用，无选择器上下文） - ❌ 错误：
.video-wrapper { @include ratio-container(4, 3); color: red; }（@content为空，padding 规则不生效） - 别在
@include后加分号——SCSS 会把它当空语句，后面样式脱离 mixin 作用域
视频元素必须绝对定位，且父容器不能设 height 或 min-height
padding-top 技巧依赖“height: 0 + padding-top 百分比”来撑高，任何显式 height 值都会覆盖这个机制。
- 容器必须设
position: relative，否则position: absolute的视频会相对 body 定位 - 视频或 iframe 必须设
top: 0; left: 0; width: 100%; height: 100%，不能只设 width - 如果父容器是 Grid 或 Flex item，确认没加
align-items: start或min-height: 0——这会让 height: 0 的容器视觉消失 - 移动端嵌入 YouTube iframe 时，额外加
allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture"，否则部分 iOS 版本会禁播
混合使用 aspect-ratio 和 padding-top 会冲突
现代浏览器支持 aspect-ratio，但你不能把它和 padding-top 写在同一选择器里——后者会被前者忽略，fallback 彻底失效。
- 正确结构是：用
@supports分开两条规则，一条走原生属性，一条走传统技巧 - 不要给同一容器同时写
aspect-ratio: 16 / 9和padding-top: 56.25% - Safari 15.4 之前版本对
padding-top在height: 0容器中支持不稳，可加min-height: 0.01px强制识别（SCSS 里可封装进 mixin） - 如果项目要兼容 IE，
@supports检测无效，得靠 class 切换或构建时条件编译，不能指望运行时 fallback
实际写的时候，最易被忽略的是：padding 计算必须用 percentage($h / $w)，不是 percentage($w / $h)；调用 mixin 必须嵌在选择器大括号内；以及视频元素的 height: 100% 缺一不可——少任何一个，容器就塌了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
