aspect-ratio在Chrome 88+、Firefox 89+、Safari 15.4+（即iOS 15.4/macOS 12.3+）原生支持，但360浏览器、微信X5内核、UC、旧版安卓WebView及更早Safari均不支持。
aspect-ratio 不生效，先查浏览器是否真支持
Chrome 88+、Firefox 89+、Safari 15.4+（即 iOS 15.4 / macOS 12.3+）原生支持 aspect-ratio；360 浏览器、微信 X5 内核、UC、旧版安卓 WebView 及 Safari aspect-ratio 条目或被划掉，基本可判定环境不支持。
实操建议：
- 用 caniuse.com 查目标用户实际覆盖的浏览器版本，别只看“主流”
- 构建工具如 PostCSS 若启用了 autoprefixer，默认不会加前缀（
aspect-ratio无前缀标准），但某些插件会误删该声明，检查输出 CSS 是否被过滤 - 避免仅靠
@supports (aspect-ratio: 1/1)判断——IE 和部分老 WebView 连@supports都不支持，会直接跳过整块规则
padding-top 百分比方案为什么能撑开高度
padding-top 百分比值是基于父容器的 width 计算的，不是自身宽高。比如父容器宽 400px，padding-top: 56.25% 就等于 225px，恰好构成 16:9 的垂直空间。这个行为从 IE6 起就稳定存在，兼容性远超 aspect-ratio。
实操建议：
- 百分比公式固定为：
padding-top = (height ÷ width) × 100%，如 4:3 →75%，1:1 →100% - 必须给父容器设
position: relative，否则子元素position: absolute会脱离上下文定位 - 内容层需额外包裹一层
position: absolute; inset: 0（或top: 0; left: 0; width: 100%; height: 100%），否则文字/图片会塌进 padding 区域 - 不要同时写
height: 0和padding-top后又加aspect-ratio——浏览器按层叠顺序取生效值，容易误以为降级没起作用
Flex 容器中 aspect-ratio 失效的典型场景
在 display: flex 父容器下，子项若设了 flex: 1 或显式 min-width: 0，会触发 flex 项收缩行为，导致 aspect-ratio 推导出的高度被强制压扁。这不是属性 bug，而是 flex 布局优先级高于比例约束。
实操建议：
- 子元素保留默认
min-width: auto（不要设min-width: 0），除非你明确需要内容换行 - 若父容器是
flex-direction: column，子项高度受父容器限制，aspect-ratio仅能按宽度反推高度，结果可能小于预期——此时降级到padding-top更可控 - Flex 子项上直接写
aspect-ratio前，先确认它没被flex-shrink: 1和窄容器共同挤压；临时加flex-shrink: 0可验证是否为此问题
@supports + padding-top 降级写法要避开的坑
理想降级不是“先写 padding，再用 @supports 覆盖”，而是让不支持 @supports 的浏览器也走 fallback。常见错误是把 position: absolute 写在 @supports 块内，导致 IE 直接丢失定位逻辑。
实操建议：
- 基础样式（兼容所有浏览器）写在外面：
.media-container { width: 100%; padding-top: 56.25%; position: relative; } -
@supports块内只重置冲突属性：@supports (aspect-ratio: 1/1) { .media-container { padding-top: 0; aspect-ratio: 16/9; position: static; } } - 内容层（
.media-content）的position: absolute必须始终在外层定义，不能放进@supports，否则老浏览器无法定位 - 慎用伪元素撑高（如
::before）替代 padding：虽语义更干净，但多一层渲染节点，对长列表性能有轻微影响
真正麻烦的不是写两套 CSS，而是判断哪些用户还在用 Safari 15.3 或微信 8.0.33（X5 内核 v4.2）。这些环境里 aspect-ratio 和 @supports 都不可靠，padding-top 方案得全程兜底——别省那几行代码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
