直接结论：<source> 的 media 属性必须写为 media="(max-width: 768px)"（含括号和单位），且 <source> 必须位于 <img> 之前、顺序从宽到窄排列，否则浏览器忽略该源并退化为 <img> fallback。
直接结论：用 <source> 的 media 属性配合 (min-width: ...) 或 (max-width: ...)，顺序从宽到窄写，再配 <img> 作为 fallback —— 浏览器加载阶段就自动选图，不依赖 JS、不触发重绘。
为什么 media="(max-width: 768px)" 有时不生效
常见现象是小屏设备始终加载大图，或所有设备都 fallback 到 <img>。根本原因不是逻辑错，而是媒体查询本身被浏览器忽略：
-
media="max-width: 768px"缺括号 → 语法非法，整条<source>被跳过 -
media="768px"或media="tablet"→ 非标准媒体特性，无效 -
<source>写在<img>后面 → 浏览器只认<img>，前面的<source>全部无视 - 断点重叠，比如同时存在
max-width: 768px和min-width: 768px→ 768px 宽度只命中第一个，第二个永远不执行
<source> 的顺序和断点怎么写才可靠
浏览器从上到下匹配，**第一个为 true 的就停**，所以顺序决定优先级。别凭直觉“从小到大”，要按实际使用频率和设备分布来排：
- 桌面端（宽屏）规则放最前：
media="(min-width: 1200px)" - 平板中等宽度居中：
media="(min-width: 768px) and (max-width: 1199px)" - 手机窄屏兜底放最后：
media="(max-width: 767px)" - 单位不能省：
768是错的，必须是768px - 避免边界值冲突：用
767px和768px分开，别用768px同时出现在两个条件里
srcset 和 sizes 怎么配合 media 切图
仅靠 media 只能切固定尺寸图；若还要适配 Retina 屏或缩放，srcset + sizes 才是关键。注意它们的归属位置：
立即学习“前端免费学习笔记（深入）”；
-
srcset可写在<source>上（推荐），也可写在<img>上（fallback 用） -
sizes只能写在<img>上，写在<source>里会被忽略 - 如果
srcset用w描述符（如hero-400w.jpg 400w），sizes必须存在，否则浏览器无法计算该加载哪张 - 示例：
sizes="(min-width: 1200px) 1200px, (min-width: 768px) 768px, 100vw"告诉浏览器：“这张图在桌面占 1200px 宽，平板占 768px，手机占满屏”
<img> 不是可选项，漏掉就白屏
它不只是给老浏览器兜底，更是整个 <picture> 的强制 fallback 节点：
- 必须存在，且必须带
src和alt属性 - 不能写成自闭合：
<img />或<img>都无效，得是<img src="..." alt="..."> - 旧版 Safari（16.4 之前）完全依赖
<img src>渲染，缺了直接空白 - 建议也给
<img>加srcset和sizes，让它自己也能适配高 DPR
最容易被忽略的是：media 查询只控制“选哪组图”，真正决定“加载哪张图”的是 srcset + sizes 的组合计算；而整个机制是否启动，取决于 <img> 是否完整、<source> 是否写在它前面、以及 media 语法是否合法——三者缺一，就退化成单图加载。
