只用max-width:100%是错觉式响应式，真正适配需srcset+sizes或；它仅缩放渲染尺寸，不减少下载量，手机仍加载1920px大图再缩至375px，浪费带宽且拖慢首屏。
只用 max-width: 100% 是错觉式“响应式”——它不省流量、不换图、不防拉伸，真要适配设备，必须靠浏览器原生资源选择机制，也就是 srcset + sizes 或 <picture></picture>。
为什么 max-width: 100% 单独用会浪费带宽
它只强制缩放渲染尺寸，图片原始文件仍全额下载。手机加载一张 1920px 宽的 JPEG，再缩到 375px 显示，像素全下了，但用户真正看到的有效信息可能不到 50KB。尤其在 4G 或弱网下，首屏卡顿、LCP 延迟、跳失率飙升都是直接后果。
-
height: auto必须同步写，否则比例失真 - Flex 容器中图片不缩？加
min-width: 0才生效 - 父容器没设明确宽高时，
object-fit完全不工作
srcset 和 sizes 怎么配才不被浏览器忽略
浏览器看到 srcset 但没选多图，八成是 sizes 没写对或写错了格式。它不是 CSS，不能写 calc()，也不接受空格（比如 (max-width: 768px) 在旧版 Edge 里直接失效）。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 描述符必须统一：全用
w（如"small.jpg 480w, medium.jpg 768w"）或全用x（如"small.jpg 1x, big.jpg 2x"），混用就退化为只加载src -
sizes值必须反映图片在布局中真实占位宽度，比如栅格占 1/3 宽、断点从 768px 开始，就得写sizes="(max-width: 768px) 100vw, 33.33vw"，而不是硬写100vw - 漏写
sizes，浏览器默认按100vw计算，小屏照样下大图
什么情况下非用 <picture></picture> 不可
当需要不同屏幕显示完全不同的构图（比如手机裁人脸、桌面展全景），或强制指定现代格式（WebP/AVIF）并提供降级路径时，<picture></picture> 是唯一解；仅适配分辨率差异，srcset + sizes 更轻量。
-
<source></source>必须写在<img>标签之前，顺序错就整个失效 -
media断点要和真实 CSS 布局断点一致（如布局用768px，就别写成767px） -
type="image/webp"的<source></source>若不被支持，会跳过，所以<img>的src必须存在且验证过加载效果 - Safari 12.1 之前对
w描述符支持不全，旧 iOS 可能只按 DPR 粗略匹配
最容易被忽略的是：所有这些机制都依赖 <meta name="viewport"> 正确声明——它必须静态写在 最顶部，内容为 width=device-width, initial-scale=1.0，漏掉或写错，后续所有响应式图片逻辑都会在解析阶段就被绕过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
