仅靠img { max-width: 100%; height: auto; }只能实现视觉缩放，无法解决加载慢、小屏加载大图、高清屏模糊等问题；真正响应式必须配合srcset和sizes实现资源适配。
只写 img { max-width: 100%; height: auto; } 能让图片不溢出，但解决不了加载慢、小屏下仍加载大图、高清屏模糊等问题——真正响应式必须配合 srcset 和 sizes，否则只是“视觉适配”，不是“资源适配”。
为什么 max-width: 100% 单独用经常失效
这行 CSS 看似简单，但实际受三重限制：
- 父容器没设宽度（比如空
<div>或未声明width/max-width），100%就失去参照 -
<img width="600" height="400">这类内联属性会直接覆盖height: auto，高度锁死 - 在
display: flex容器中，<img>默认有min-width: auto，它会阻止收缩，哪怕写了max-width: 100%
修复方式统一加： img { max-width: 100%; height: auto; min-width: 0; }。其中 min-width: 0 是关键开关，专治 Flex/Grid 下撑开布局的问题。
srcset + sizes 必须成对出现才生效
srcset 列的是图片固有宽度（单位必须是 w），sizes 告诉浏览器“这张图在页面里大概占多宽”。浏览器靠两者匹配选图，缺一不可。
立即学习“前端免费学习笔记（深入）”；
- 错例：
srcset="a.jpg 480w" sizes="(max-width: 480px) 100vw"—— 小屏下计算出显示宽度约 375px，但没提供更小的w选项，只能硬选 480w，浪费带宽 - 对例：
srcset="a-320.jpg 320w, a-480.jpg 480w, a-800.jpg 800w" sizes="(max-width: 480px) 100vw, (max-width: 960px) 50vw, 33vw" -
sizes中不能用calc()，但支持媒体查询语法；兜底值（如最后的33vw）建议保留，尤其要兼容 Safari 13.1 之前版本
什么时候该用 <picture> 而不是 <img>
当需要「构图切换」或「格式降级」时，<picture> 不是可选项，而是唯一解：
- 手机裁人脸、桌面展全景：用
<source media="(max-width: 480px)" srcset="face.jpg">配合<img src="pano.jpg" alt=""> - 强制 WebP/AVIF 并 fallback 到 JPEG：先写
<source type="image/webp" srcset="img.webp">，再写<img src="img.jpg" alt=""> - 顺序不能错：
<source>必须在<img>之前；media断点必须和真实 CSS 布局断点一致（比如布局用768px，就别写767px）
object-fit 只在固定尺寸容器中起作用
很多人写了 object-fit: cover 却没效果，是因为它根本不关心“自适应”，只负责“怎么填满一个已知框”：
- 必须同时给容器设明确宽高，例如
width: 100px; height: 100px;或aspect-ratio: 1/1; -
object-fit: cover适合头像、封面图（允许裁剪）；object-fit: contain适合产品图、图表（必须完整） - IE 完全不支持，fallback 方案只能用
background-image+background-size，但会丢失alt和 SEO
最易被忽略的一点：viewport 标签没写对，所有响应式努力都会打折扣——<meta name="viewport" content="width=device-width, initial-scale=1.0"> 必须放在 <head> 最顶部，且不能动态插入、不能重复、不能加 user-scalable=no。
