media属性必须写在内且带括号，如"(max-width: 480px)"；上添加无效；顺序须从宽到窄，否则小屏规则会拦截所有匹配；为必需兜底，须含src与alt。
media属性必须写在里，且语法要带括号
浏览器只认 <source></source> 上的 media，<picture></picture> 自身加 media 完全无效。常见错误是写成 media="max-width: 768px"（缺括号）或 media="768px"（非法值），这种写法会让整个 <source></source> 被静默忽略，浏览器直接跳到 <img> fallback。
正确写法必须是完整媒体查询语法：
media="(max-width: 480px)"media="(min-width: 768px) and (orientation: landscape)"-
media="(prefers-reduced-motion: reduce)"（用于动效降级）
如果 Network 面板里看不到任何 <source></source> 请求，先检查这条。
source顺序必须从宽到窄，否则高分辨率设备永远加载小图
浏览器按从上到下的顺序扫描 <source></source>，遇到第一个匹配的就停，不再往后看。所以顺序错了，结果就完全反了。
✅ 正确顺序（推荐）：
<source media="(min-width: 1200px)" srcset="hero-1600w.jpg 1600w"></source><source media="(min-width: 768px)" srcset="hero-1024w.jpg 1024w"></source><source media="(max-width: 767px)" srcset="hero-480w.jpg 480w"></source>
❌ 错误顺序（max-width 放最前）：
-
<source media="(max-width: 767px)" ...></source>→ 所有设备都命中这里 - 后面两条规则永远不会执行
边界值也要留空隙，比如避免同时存在 (min-width: 768px) 和 (max-width: 768px)，768px 宽度行为不可控。
sizes必须和CSS真实渲染宽度一致，否则srcset选源失效
sizes 不是“让图片变多宽”，而是告诉浏览器：“这张图在当前断点下，**预计会渲染成多宽**”。浏览器靠它 + srcset 中的 w 描述符，才能算出该加载哪张图。
常见错误是写死 sizes="100vw"，但实际 CSS 限制了图片最大宽为 max-width: 600px —— 这样小屏下浏览器仍按视口全宽计算，可能加载 1200w 图，浪费流量。
正确做法是让 sizes 和 CSS 表现严格对齐：
- CSS 中图片占满容器：
sizes="100vw" - 在 768px+ 断点中占一半：
sizes="(min-width: 768px) 50vw, 100vw" - 用 DevTools 的 Layout 面板确认最终渲染宽度，再反推
sizes值
sizes 只能写在 <img> 上，不能写在 <source></source> 里 —— 写错位置等于没写。
img标签不是可选项，是强制fallback且必须带src
<img> 是 <picture></picture> 的必需子元素，漏掉或写成自闭合（<img>）会导致整个区域空白，尤其在旧版 Safari 或格式不支持时。
它必须满足三个硬性条件：
- 有
src属性（否则不触发加载） - 有
alt属性（可访问性 + 部分浏览器加载策略依赖） - 不能是自闭合标签（必须写成
<img src="..." alt="...">）
更稳妥的做法是给 <img> 也配 srcset 和 sizes，比如：
<img src="hero-400.jpg" srcset="hero-400.jpg 400w, hero-800.jpg 800w" sizes="100vw" alt="hero">
这样即使所有 <source></source> 都不匹配（比如 media 全部失效、MIME type 被拦截），用户至少能看到一张适配 DPR 的图。
最容易被忽略的是：所有 srcset 中的路径必须真实可访问，且服务器返回正确的 MIME type（image/webp 不能返回 text/plain）。Network 面板里看到 404 或 blocked:mime-type，再对的 HTML 也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
