真响应式必须用srcset+sizes或，max-width:100%仅控制渲染尺寸不减少流量；需配height:auto防变形，flex容器中img须加min-width:0；srcset须统一用w或x单位，sizes需匹配实际布局断点。
只用 max-width: 100% 是假响应式，图片照常下载大尺寸资源，4G 网络下白耗流量；真响应式必须靠 srcset + sizes 或 <picture></picture> 驱动浏览器选图，否则再好看的模板也浪费带宽。
为什么 max-width: 100% 单独写等于没做响应式
它只控制渲染尺寸，不干预资源加载——手机加载一张 1920px 宽的图，再缩到 375px 显示，像素全下了，但用户只看到 30KB 有效信息。更糟的是：flex 容器默认 min-width: auto 会卡住图片收缩，得手动加 min-width: 0 才生效；height: auto 漏写会导致拉伸变形。
-
max-width: 100%必须和height: auto成对出现，否则比例崩坏 - 父容器是
display: flex时，子img要额外加min-width: 0 - 它不触发任何资源选择逻辑，
srcset和<picture></picture>才干这事
srcset + sizes 怎么写才不被浏览器忽略
漏写 sizes、混用 w 和 x 描述符、或 sizes 值与真实布局脱节，都会让浏览器直接跳过整个 srcset，退化为只加载 src。
-
srcset里只能统一用w（如"small.jpg 480w, medium.jpg 768w"）或统一用x（如"low.jpg 1x, high.jpg 2x"），不能混写 -
sizes是字符串，不是 CSS，不支持calc()，但支持媒体查询语法：sizes="(max-width:480px) 100vw, (max-width:768px) 50vw, 33vw" - 如果图片在栅格中占 1/3 宽，且断点从 768px 开始，
sizes就该是"(max-width:768px) 100vw, 33.33vw"，不是硬写100vw - Safari 12.1 之前版本对
w描述符支持不全，旧 iOS 可能只按 DPR 粗略匹配
<picture></picture> 什么情况下非用不可
当需要艺术方向裁剪（比如手机裁人脸、桌面展全景）或强制格式回退（优先 WebP，降级 JPEG）时，<picture></picture> 是唯一解；仅适配分辨率差异，srcset + sizes 更轻量。
-
<source></source>的media和type是 AND 关系，浏览器跳过任何不满足其一的项 - 顺序决定优先级：最具体规则放最前，兜底
<img>放最后 -
media断点要和真实 CSS 布局断点一致，比如用768px就别写成767px -
type="image/webp"若拼错（如多写分号），浏览器直接跳过该<source></source>
容易被忽略的兼容性细节
旧版 Edge（EdgeHTML）解析 sizes 时，媒体查询里有空格（如 (max-width: 768px)）会导致整个属性失效；Safari 对 w 描述符的支持直到 12.1 才稳定；object-fit 在容器无明确宽高时完全不生效——这些都不是“写了就跑通”的事。
真正麻烦的是：CSS 布局变了但 sizes 没同步更新，或者 srcset 提供的宽度候选值和 sizes 计算出的目标物理像素不匹配（例如视口 > 768px 时 sizes 给出 33vw ≈ 396px，但 srcset 最小只有 480w），结果浏览器被迫加载过大图或 fallback 到 src。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
