直接用@mixin ratio-container可生成带降级的宽高比容器，但需手动处理@supports分支、percentage($h/$w)计算和box-sizing校验；它不自动补fallback，也不识别比例意图，必须传两个数字参数并配合position:relative与absolute子元素。
直接用 @mixin ratio-container 就能生成带降级的宽高比容器，但必须手动处理 @supports 分支、percentage($h / $w) 计算和 box-sizing: border-box 校验——SCSS 不会自动补 fallback，也不懂你想要 16:9 还是 1:1。
为什么不能只写 aspect-ratio: 16 / 9？
因为 Safari 15.4 之前、Firefox 89 之前、所有 IE 和旧版 Android WebView 都不支持 aspect-ratio。只写这一条，老设备上容器高度塌陷为 0。必须同时提供 padding-top 降级方案，且两者逻辑要严格对齐：
-
@supports (aspect-ratio: 16 / 9)块内只放现代写法，不混任何 fallback 样式 - 降级块必须平级写在
@supports外面，不能嵌套，否则旧浏览器连解析都跳过 - 别用
$h / $w * 100%算 padding：SCSS 先算除法得小数（如9/16 → 0.5625），再乘%无效；必须用percentage($h / $w)
@mixin ratio-container($w, $h) 必须带两个数字参数
传字符串如 "16/9" 或单个值如 16 都不行——SCSS 无法对字符串做除法，也无法从单值反推比例。调用时必须明确宽高：
@include ratio-container(16, 9); // ✅ 正确
@include ratio-container(4, 3); // ✅ 正确
@include ratio-container(16/9); // ❌ 报错：$w 不是 number
@include ratio-container("16/9"); // ❌ 报错：无法除字符串
内部计算依赖 $h / $w，所以顺序不能反；若需竖屏（9:16），就写 @include ratio-container(9, 16)。
子元素必须用 position: absolute 填满
padding-top 方案本质是“用横向宽度撑出纵向空间”，它本身不占布局流，所以子元素不会自动感知这个“高度”。常见错误包括：
- 只设
width: 100%; height: 100%，但父容器没position: relative→ 子元素相对视口定位，错位 - 漏了
top: 0; left: 0→ 子元素默认top: auto，可能悬空或偏移 - 没加
box-sizing: border-box→ padding 会让容器总宽超 100%，导致横向滚动或换行
标准组合是：position: relative 在容器上，position: absolute; top: 0; left: 0; width: 100%; height: 100% 在子元素上。
响应式切换比例要靠 @media 包裹整组规则
不能只在 @supports 块里改 aspect-ratio 值，因为旧浏览器根本不认这个属性，改了也白改。正确做法是用媒体查询把整套规则（含 @supports + 降级）包起来：
@media (max-width: 768px) {
@include ratio-container(1, 1);
}
@media (min-width: 769px) {
@include ratio-container(16, 9);
}
这样，新旧浏览器都能按断点拿到对应比例——现代浏览器走 @supports 分支，老浏览器走同级降级分支，逻辑完全隔离。
最易被忽略的是 box-sizing: border-box 和 position: relative 的强制配套。很多人写了 mixin 却忘了在调用处补这两句，结果 padding 撑开容器、子元素定位失效，最后回头怀疑 mixin 有 bug。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
