.ratio类单独使用无效，必须与.ratio-16x9等比值类组合，并为子元素设置width:100%;height:100%才能生效；常见错误是遗漏比值类或子元素宽高样式。
ratio类为什么加了没反应？
因为.ratio本身不生效，它只是个容器修饰类，必须配合子元素（通常是<iframe></iframe>、<video></video>或<img>）和一个具体的比值类（如.ratio-16x9）一起用，且子元素得设width: 100%; height: 100%才能撑满。
常见错误现象：
– 页面上只写了<div class="ratio"><iframe src="..."></iframe></div>，没加比值类，也没给iframe设宽高
– 子元素用了max-width: 100%或没设height，导致比例塌陷
- 必须组合使用：
.ratio+.ratio-16x9（或其他比值类） - 子元素需显式设置
style="width: 100%; height: 100%"，或通过自定义CSS统一处理 - Bootstrap 5.3+ 支持
aspect-ratio原生属性，但老版本仍依赖padding-top技巧，所以别指望纯aspect-ratio: 16/9在旧项目里自动生效
ratio-4x3和ratio-16x9在移动端显示异常？
不是类本身有问题，而是.ratio默认用position: relative + padding-top实现宽高比，一旦父容器宽度为0（比如Tab切换后未渲染、或display: none状态刚切回来），padding计算就失效，导致高度塌缩。
使用场景：
– Tab页签里嵌入YouTube视频
– Modal弹窗中动态加载iframe
– 响应式网格中col宽度随断点变化
- 避免在
display: none容器里初始化.ratio结构；改用visibility: hidden或等显示后再渲染 - 如果父容器宽度可能动态变化（如resize、sidebar展开），需手动触发重绘：给
.ratio加transform: translateZ(0)或调用offsetHeight强制回流 -
.ratio-4x3和.ratio-16x9的padding值是写死的（75% / 56.25%），不随字体大小或缩放变化，这点比CSSaspect-ratio更稳定，但也更死板
想自定义21:9超宽屏比例，怎么加？
Bootstrap不提供开箱即用的.ratio-21x9，但可以复用它的CSS机制——它本质就是padding-top百分比 + 绝对定位子元素。自己加一行CSS就能搞定，不用改源码或引入额外工具。
参数差异：
– .ratio-16x9 → padding-top: 56.25%（9÷16）
– .ratio-21x9 → padding-top: 42.857%（9÷21 ≈ 0.42857）
- 直接在项目CSS里加：
.ratio-21x9 { --bs-aspect-ratio: 42.857%; }（Bootstrap 5.3+ 推荐方式） - 老版本（5.0–5.2）可覆盖：
.ratio-21x9::before { padding-top: 42.857%; } - 注意：自定义类名必须带
.ratio-前缀，否则.ratio容器的::before伪元素不会匹配 - 别用
calc()动态算百分比——CSS里不支持变量运算，--bs-aspect-ratio只是被var()引用的字符串值
用ratio类嵌YouTube iframe时控制台报“Unsafe JavaScript attempt”？
这不是.ratio的问题，是YouTube iframe默认启用了allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"，而某些老浏览器或严格CSP策略下会警告。但不影响比例功能本身。
性能 / 兼容性影响：
– .ratio本身无JS，纯CSS，性能无负担
– 但iframe加载会阻塞页面解析，尤其首屏视频建议加loading="lazy"
– Safari 15.4+ 对aspect-ratio支持完善，但iOS 14.5以下仍要靠.ratio兜底
- 安全警告可忽略，除非你真在限制
gyroscope等权限；删掉对应allow项即可，例如去掉gyroscope就不会再报 - 务必给
iframe加title属性，否则无障碍访问会失败（WCAG 2.1 要求） - 如果用
iframe加载第三方内容，.ratio容器的overflow: hidden可能裁掉滚动条或弹层，此时需改用aspect-ratio+width: 100%替代
width: 100%; height: 100%——看着简单，但React/Vue里动态插入内容、或者Tailwind和Bootstrap混用时，很容易被覆盖掉。
