aspect-ratio 能减少移动端布局抖动，因其使容器在内容加载前按宽高比预留空间，避免渲染时尺寸突变导致后续内容下移。
为什么 aspect-ratio 能减少移动端布局抖动
移动端加载时图片、广告或视频容器没设宽高，浏览器渲染到它们时才计算尺寸，导致后续内容突然下移——这就是“布局抖动”（layout shift）。aspect-ratio 让容器在内容加载前就按比例预留空间，避免重排。它不是“等图片加载完再占位”，而是直接让父容器具备可预测的几何尺寸。
注意：该属性作用于块级或替换元素（如 <img alt="CSS怎样优化移动端加载时的布局抖动_利用aspect-ratio预留空间" >、<div>），且需配合 <code>width 或 max-width 使用才有实际效果；只写 aspect-ratio: 16/9 不设宽度，容器可能缩成一条线。
怎么给图片和响应式容器正确加 aspect-ratio
直接在 <img alt="CSS怎样优化移动端加载时的布局抖动_利用aspect-ratio预留空间" > 上写 aspect-ratio 是无效的（<img alt="CSS怎样优化移动端加载时的布局抖动_利用aspect-ratio预留空间" > 是替换元素，但原生不支持该属性参与盒模型计算），必须用包裹容器。
- 用
<div class="ratio-box"><img src="..." alt="CSS怎样优化移动端加载时的布局抖动_利用aspect-ratio预留空间" ></div>，然后对.ratio-box设置aspect-ratio: 4/3和width: 100% - 若图片本身有
width和height属性（比如 CMS 输出的），可保留，但要加height: auto防止拉伸 - 慎用
aspect-ratio+object-fit: cover组合：前者管容器尺寸，后者管图片裁剪，二者不冲突，但若容器宽高被其他规则覆盖（如flex子项未设min-width: 0），aspect-ratio可能失效
aspect-ratio 在 Safari 和旧 Android 浏览器里怎么兜底
Safari 15.4+、Chrome 88+、Firefox 89+ 原生支持；iOS 15.4+、Android Chrome 88+ 也支持。但 iOS 15.0–15.3、部分国产 WebView（如早期 X5）仍不识别。
立即学习“前端免费学习笔记（深入）”；
兜底方案不是 JS 检测后动态插样式，而是用 CSS 伪类渐进增强：
.media-container {
width: 100%;
}
@media (supports (aspect-ratio: 1/1)) {
.media-container {
aspect-ratio: 16/9;
}
}
/* 不支持时用 padding-top 百分比技巧 */
.media-container::before {
content: "";
display: block;
padding-top: 56.25%; /* 16:9 = 9/16 ≈ 56.25% */
margin-top: -100%;
}
.media-container > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
注意：padding-top 方案要求容器为 position: relative，且子元素需绝对定位；而 aspect-ratio 方案更简洁、无定位侵入性，但无法通过 JS 精确获取渲染后高度（它不触发 layout，只是盒模型约束）。
哪些场景下 aspect-ratio 会“看起来没生效”
常见假失败现象不是语法错，而是被更高优先级规则压制或容器行为异常：
-
flex容器中子项未设flex-shrink: 0，导致aspect-ratio容器被压缩变形 - 父容器写了
overflow: hidden且子项有transform，可能截断aspect-ratio计算出的高度区域 - 使用了
contain: layout的祖先元素，会隔离aspect-ratio的尺寸传播 - 服务端渲染（SSR）时，若框架（如 Next.js）未注入 CSS 到 head，首屏仍会抖动——
aspect-ratio不是 JS 行为，依赖样式及时就绪
真正难处理的是动态比例内容（比如用户上传的图宽高未知），这时不能硬编码 aspect-ratio，得结合后端返回的宽高字段生成内联样式，或用 ResizeObserver + 占位骨架做二次修正。
