标签本身不切换图片，它只是把选择权交给浏览器；media属性必须写在内且语法正确，顺序需从宽到窄，否则浏览器将忽略或仅加载兜底图。

标签本身不切换图片，它只是把选择权交给浏览器——写对 <source></source> 的 media 顺序和语法，浏览器才会在加载阶段自动挑出最合适的那张。

为什么写了 media 却没切换？

因为 media 属性必须写在 <source></source> 里，<picture></picture> 自身加 media 会被完全忽略。常见错误包括：

• media="max-width: 768px"（缺括号）→ 浏览器静默跳过该 <source></source>
• media="768px" 或 media="tablet" → 非法值，整个 <source></source> 失效
• <source></source> 写在 <img> 后面 → 浏览器直接忽略，只加载 <img src>
• 所有 <source></source> 的 media 都不匹配 → 浏览器不会报错，只会默默 fallback 到 <img src>

media 的断点顺序为什么必须从宽到窄？

浏览器按从上到下的顺序扫描 <source></source>，遇到第一个为 true 的 media 就立即加载对应 srcset，不再继续判断。所以：

绘蛙AI视频

绘蛙AI视频是一款面向电商营销的图片转视频和模特动态视频生成工具。

下载

• ✅ 推荐写法：media="(min-width: 1200px)" → media="(min-width: 768px)" → media="(max-width: 767px)"
• ❌ 错误写法：media="(max-width: 767px)" 放最前 → 所有小屏设备永远卡在这条，宽屏规则根本没机会执行
• ⚠️ 避免边界重叠：比如 (min-width: 768px) 和 (max-width: 768px) 并存，768px 宽度会命中第一个，行为不可控

如何让 <img> 真正成为可靠 fallback？

<img> 不是可选装饰，而是强制兜底节点。漏掉或写错会导致图片区域空白：

• 必须存在，且必须带 src 和 alt 属性（否则可访问性失败，旧版 Safari 可能不触发加载）
• 不能写成自闭合：<img> 或 <img> → 必须是 <img src="..." alt="...">
• 推荐给 <img> 也加 srcset 和 sizes，尤其当 fallback 图也要适配 2x 屏时
• 如果发现“始终只加载 <img src>”，先检查 Network 面板：是否所有 <source></source> 请求都返回 404 或 (blocked:mime-type)？

media 和 srcset + sizes 是什么关系？

它们不在同一层级，也不互斥，但职责分明：

• media 控制“用哪一组图”（art direction 场景，比如桌面横幅 vs 手机竖构图）
• srcset + sizes 控制“这一组里选哪个分辨率版本”（DPR 或视口宽度变化下的精细匹配）
• sizes 必须写在 <img> 上，不是 <source></source>；漏写或语法错（如单位缺失、逗号遗漏）会导致浏览器按默认 100vw 计算，小屏也可能加载大图
• 一个 <source></source> 可以同时有 media 和 srcset，例如：<source media="(min-width: 768px)" srcset="hero-768w.jpg 768w, hero-1536w.jpg 1536w" sizes="(min-width: 768px) 768px, 100vw"></source>

真正容易被忽略的点是：所有 <source></source> 的 media 都不匹配时，浏览器不会尝试“修正”或“降级匹配”，它只是安静地加载 <img src> —— 所以你的兜底图，得真能撑住所有意外情况。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！