移动端必须用 aspect-ratio 预留空间，因其能跨断点稳定维持比例、防止布局塌陷；需写在容器上，配合背景色与懒加载动画优化体验。
为什么移动端必须用 aspect-ratio 预留空间
移动端屏幕宽度多变，仅靠 width: 100% + height: auto 会让图片加载前高度为 0，一加载就“顶开”下方内容，用户正在滑动时突然跳一下——这不是动画问题，是布局塌陷。关键不是等图片回来再撑开，而是提前告诉浏览器“这里该占多大地方”。aspect-ratio 是唯一能跨断点稳定维持比例的 CSS 属性。
- 必须写在容器上（如
.img-wrapper），不能只写在img上——img加载前没有尺寸，aspect-ratio不生效 - 值推荐用整数比，比如
aspect-ratio: 4 / 3或16 / 9；若后端图比例不固定，得用 JS 动态写style="--aspect-ratio: X/Y"再由 CSS 读取 - 旧版 Safari（iOS 15.4 及更早）不支持
aspect-ratio，需降级为padding-top：给容器设position: relative，子元素::before用padding-top: 75%模拟 4:3
占位背景色怎么选才不突兀
别用纯白或纯灰。移动端环境光强、屏幕亮度高，#ffffff 在深色模式下刺眼，#000000 在浅色模式下像黑洞。中性灰要带一点暖或冷调，且和品牌主色有明度差。
- 头像类图片推荐
background-color: #f0f4f8（偏冷浅灰） - 商品图用
background-color: #f9f9f9（暖白，比背景略深） - 横幅/ banner 图建议加一层细网格渐变：
background-image: linear-gradient(45deg, #f2f2f2 25%, transparent 25%), linear-gradient(-45deg, #f2f2f2 25%, transparent 25%); background-size: 20px 20px; - 绝对不要用
background: url(data:image/svg+xml,...)做占位——base64 过长会阻塞 CSS 解析，首屏渲染延迟明显
懒加载动画为什么不能直接 animating img
因为 img 元素在 src 未加载完成前，自然尺寸是 0×0，任何 transform 或 scale 动画都会从一个看不见的点开始放大，视觉上像“炸开”，尤其在低端安卓机上掉帧严重。
- 正确做法是用伪元素盖一层占位层：
.img-wrapper::before设背景色/渐变，img绝对定位盖在上面，初始opacity: 0 - 监听
load事件后，只改img的opacity: 1，过渡用transition: opacity 0.25s ease - 别加
will-change: transform——移动端 Safari 对这个属性处理不稳定；will-change: opacity可以加，但仅限动画期间动态 toggle，加载完立刻移除 - 如果用了骨架屏 SVG，确保它是内联 data URI，且宽高与容器一致，否则
object-fit: cover会裁剪错位
IntersectionObserver 怎么配 rootMargin 才不卡顿
移动端滚动快、惯性长，rootMargin: '0px' 容易导致图片刚进视口才开始加载，用户已滑过——看到空白再回拉，体验断层。但设太大（如 '200px'）又浪费带宽。
立即学习“前端免费学习笔记（深入）”；
- 推荐值：
rootMargin: '100px 0px'（上下提前 100px，左右不变），适配主流手机屏幕高度 - 配合
threshold: 0.01，意思是只要 1% 进入视口就触发，比默认0更灵敏 - 务必在
observe()后立刻unobserve()，否则内存泄漏；错误写法：imageObserver.observe(img); // 忘了 unobserve - 降级方案不是“全量加载”，而是 fallback 到
getBoundingClientRect()+requestIdleCallback()，避免 scroll 事件高频触发
aspect-ratio 和背景色。头像切圆角、商品图要留白边、banner 需要全屏铺满——这些细节差异必须通过 class 区分，而不是靠 JS 动态判断 type 字段。否则维护成本会上升，且 CSS 无法复用。 
