media属性必须写在标签内而非标签内，因为浏览器按顺序匹配首个为true的media条件来加载对应srcset，其余跳过；自身添加media会被忽略，且需确保的src作为兜底存在。
picture 标签本身没有 media 属性 —— 真正起作用的是 <source></source> 元素的 media 属性。 写错位置或漏掉 <source></source>，整个响应式切换就失效，最后只加载 <img> 的 src。
为什么 media 必须写在 <source></source> 里
浏览器解析 <picture></picture> 是自上而下顺序匹配：遇到第一个 media 表达式为 true 的 <source></source>，就加载它的 srcset，其余全部跳过。这个机制决定了它不是“多选”，而是“单选+兜底”。<picture></picture> 自身不接收任何媒体条件，强行加 media 属性会被忽略。
-
media值必须是合法 CSS 媒体查询，比如(min-width: 768px)，不能省略括号或单位（768px是错的，(768px)也是错的） - 不支持
prefers-color-scheme或hover等非尺寸类特性单独驱动切换；这类需求得靠 JS 或 CSS 配合<img>的src动态更新 - IE 和部分老 Android 浏览器不支持
<source></source>的media，但会降级到<img>，所以<img>的src不可省略
media 断点怎么写才不冲突
常见翻车是断点重叠或顺序颠倒，导致小屏被宽屏规则“误捕获”。比如 (min-width: 768px) 放在 (max-width: 767px) 前面，767px 宽度的设备根本不会进第二个 <source></source> —— 因为第一个已匹配。
- 推荐从宽到窄写：先
(min-width: 1200px)，再(min-width: 768px)，最后(max-width: 767px) - 避免用
min-width: 768px和max-width: 768px并列，768px 这个边界值会同时满足两者，但浏览器只取第一个，行为不可控 - 移动端优先场景下，把
(max-width: 480px)或(max-width: 375px)放最底下作兜底，确保小屏设备总有图可用
media 和 srcset + sizes 怎么配合
media 控制“换哪张图”，srcset + sizes 控制“这张图里选哪个分辨率版本”。两者不在同一层级，也不互斥 —— 可以在一个 <source></source> 里同时用。
- 如果只用
media，适合 art direction 场景：桌面用横幅图、手机用竖构图裁剪版，图片内容完全不同 - 如果只用
srcset+sizes（没写media），适合同一构图适配不同 DPR 或视口宽度下的渲染尺寸 - 混用时，
media优先：先判断是否启用该<source></source>，启用后再根据sizes计算目标宽度，从srcset中选最接近的资源 -
sizes必须写在<img>上，不是<source></source>；漏写或语法错误（如缺逗号、单位错）会导致浏览器按默认100vw计算，小屏也可能加载大图
最容易被忽略的一点：所有 <source></source> 的 media 都不匹配时，浏览器不会报错，也不会尝试加载其他 <source></source>，而是直接用 <img> 的 src —— 所以务必确认兜底图存在、路径正确、且尺寸合理。调试时打开 DevTools 的 Network 面板，禁用缓存，切设备宽度，看实际加载的是哪个 URL，别信预览效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
