media属性必须为合法CSS媒体查询，如"(max-width: 768px)"，缺括号或非查询语句会被忽略；多个source的media需互斥覆盖全范围，且须与type同时匹配才生效。
media 属性必须写成合法媒体查询，不能省略括号
浏览器只认标准 CSS 媒体查询语法，media="(max-width: 768px)" 是有效的，media="max-width: 768px"（缺括号）或 media="768px"（非查询语句）会被整个忽略，该 <source> 形同虚设。
常见错误是复制设计稿断点时漏掉括号，或误把 JS 变量名当媒体条件用。验证方法很简单：打开 DevTools → Elements → 点开 <source> 标签，看右侧面板的 Computed 中 media 是否解析为有效值；若显示 none 或空白，说明语法无效。
多个 source 的 media 条件必须互斥且覆盖全范围
浏览器按 <source> 顺序从上到下匹配，遇到第一个满足 media 且资源可加载的就停。如果两个条件重叠（比如 (max-width: 768px) 和 (max-width: 1024px)），小屏设备会永远命中第一个，第二个永远不会触发。
- 推荐写法：用
(max-width: 480px)、(min-width: 481px) and (max-width: 1024px)、(min-width: 1025px)这类明确分段 - 更稳妥写法：末尾用
media="all"或直接不写media（但必须配type或srcset，否则仍被忽略） - 别依赖“默认 fallback”——
<img>只在所有<source>都不匹配时才生效，不是兜底逻辑的保险丝
media 和 type 是 AND 关系，缺一不可
<source> 要被选中，必须同时满足 media 匹配 *且* type 被浏览器支持。比如写了 type="image/webp" 但服务器返回了 Content-Type: text/plain，或者拼错成 type="image/webp;"（多了一个分号），该 <source> 就会被跳过。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
调试时重点检查 Network 面板里图片请求的 Response Headers 中的 Content-Type，它必须和 type 值完全一致。旧版 Android WebView 对 type 解析尤其严格，哪怕 MIME 类型正确但带参数（如 image/webp;charset=utf-8）也可能失败。
不要给每个 source 都写相同的 media 值
如果所有 <source> 的 media 都一样（比如全是 (max-width: 768px)），浏览器只会选第一个，其余形同冗余。这种写法常见于误以为“多写几个能提高兼容性”，实际反而增加解析负担、干扰调试。
真正需要并列多个 source 的场景只有两种：
– 同一断点下提供不同格式（WebP + JPEG fallback）
– 同一断点下提供不同构图（竖图 + 横图），但此时应靠 media 区分视口，而不是靠重复条件
最易被忽略的是：当只用 media 切换尺寸、不涉及格式或构图变化时，<picture> 本身已是过度设计——直接用 <img srcset> + sizes 更轻量、更可靠。
