移动端布局抖动源于图片/视频加载后重排，核心是提前预留正确容器空间；aspect-ratio 是最直接解法，但须配合 width/max-width 使用，且需注意 Safari 兼容性、宽高比动态适配及 Flex/Grid 中的失效场景。
移动端布局抖动是因为图片/视频加载后重排
页面刚打开时容器高度为0或由内容撑开，等图片下载完成、尺寸确定，浏览器重新计算布局，导致下方内容突然下移——这就是抖动。核心不是“怎么让元素不跳”，而是“提前给容器预留正确空间”。aspect-ratio 是目前最直接的解法，但得用对。
必须配合 width 或 max-width 使用 aspect-ratio
aspect-ratio 本身不触发尺寸计算，它只在容器有明确宽度（或能推导出宽度）时才生效。纯 height: auto + aspect-ratio 在移动端常失效，尤其在 flex / grid 子项里。
- ✅ 正确：给容器设
width: 100%或max-width: 100%，再加aspect-ratio: 16/9 - ❌ 错误：只写
aspect-ratio: 16/9，父容器又没设宽，结果容器塌陷成一条线 - ⚠️ 注意：Safari 15.4+ 才支持
aspect-ratio，旧版需 fallback（比如用 padding-top 百分比 hack）
图片加载前留白要和真实宽高比一致
如果后端返回的图片尺寸不确定，或响应式场景下宽高比会变（如横图 vs 竖图），硬写死 aspect-ratio: 16/9 反而会让内容被裁切或留大片空白。
- 优先从 API 获取宽高字段，动态写入 style：
style="aspect-ratio: ${w}/${h}" - 若无法获取，按业务最大可能宽高比预留（比如卡片图统一按
4/3，封面图按21/9），比全写1/1更靠谱 - 避免用
object-fit: cover配合错误aspect-ratio，会导致视觉比例失真
Flex/Grid 里 aspect-ratio 可能被忽略
在 display: flex 容器中，子项默认 flex-shrink: 1，会压缩自身来适应父容器，此时 aspect-ratio 可能被绕过；Grid 中若设置了 grid-template-rows: auto，也容易失效。
- Flex 子项加
flex-shrink: 0，确保不被压缩 - Grid 项加
min-height: 0（防止隐式最小尺寸干扰） - 调试时检查 computed styles，确认
aspect-ratio是否被标记为 “active” 而非 “inactive”
真正难的不是写对那一行 aspect-ratio，而是整个链路里——API 是否传宽高、CSS 是否被层叠覆盖、父容器是否意外限制了尺寸、图片是否用了懒加载却没占位——漏掉任意一环，抖动就还在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
