<picture>本身不决定“移动优先”或“桌面优先”，其匹配逻辑是自上而下、遇首个满足条件即停止；所谓优先级取决于<source>中media的类型（max-width或min-width）及书写顺序：移动优先用递增max-width，桌面优先用递减min-width，且<img>必须作为兜底存在并含src与alt。
为什么 <picture> 本身不决定“移动优先”或“桌面优先”
很多人以为 <picture> 的写法顺序天然对应响应优先级，其实不是。<source> 标签的匹配逻辑是**从上到下、遇到第一个匹配就停止**，和“设备尺寸大小”没有绑定关系。所谓“移动优先”，本质是你把 min-width 或 max-width 的媒体查询写在哪个 <source> 上，以及怎么组织它们的顺序。
移动优先：用 max-width + 从窄到宽顺序
这是最符合直觉的做法：先给小屏（如手机）指定图，再逐级覆盖更大屏幕。关键点是所有 <source> 都用 max-width，且按递增顺序排列，否则会漏匹配。
<source media="(max-width: 480px)" srcset="hero-mobile.jpg"><source media="(max-width: 768px)" srcset="hero-tablet.jpg"><source media="(max-width: 1200px)" srcset="hero-desktop.jpg">-
<img src="hero-desktop.jpg" alt="...">—— fallback，也建议设为最大尺寸图
注意：max-width: 480px 匹配的是 ≤480px 的视口，max-width: 768px 会同时匹配 481–768px，所以顺序不能乱。如果中间漏了断点（比如跳过 481–768），那这部分宽度就会回落到 <img>。
桌面优先：用 min-width + 从宽到窄顺序
桌面优先其实是“大屏先行”，适合内容主视觉强、移动端只需简化图的场景。此时必须把 min-width 的 <source> 按**递减顺序**写，否则高优先级规则会被低优先级覆盖。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
<source media="(min-width: 1200px)" srcset="hero-desktop-xl.jpg"><source media="(min-width: 768px)" srcset="hero-desktop.jpg"><source media="(min-width: 480px)" srcset="hero-tablet.jpg">-
<img src="hero-mobile.jpg" alt="...">—— fallback，这里应是最小尺寸图
浏览器从上往下检查，遇到第一个满足的 min-width 就停。所以 1200px 必须在最前，否则 1400px 视口也会去匹配 768px 那条。另外，<img> 的 src 是兜底项，它不会被媒体查询跳过，因此必须是能安全显示的最小兼容图。
无缝过渡的关键：避免分辨率跳跃和 DPR 不一致
光靠宽度切换还不够。同一宽度下，iPhone 14 Pro 和 Chrome 桌面窗口都可能是 390px 宽，但前者需要 2x 图，后者只需 1x。这时候得靠 srcset 里的 x 描述符补足。
- 在任意
<source>中混用width和x描述符会失效，必须统一 - 推荐做法：每个
<source>用srcset提供多倍图，例如：srcset="hero-480w.jpg 1x, hero-480w@2x.jpg 2x" - 或者更现代的写法（需服务端支持）：
srcset="hero-480w.jpg 480w, hero-768w.jpg 768w, hero-1200w.jpg 1200w" sizes="(max-width: 480px) 100vw, (max-width: 768px) 100vw, 1200px"
真正容易被忽略的是 sizes 属性——它告诉浏览器“这张图在不同断点下大概占多少视口宽度”，直接影响浏览器选哪张 srcset 中的图。没写 sizes，浏览器默认按 100vw 算，可能导致高清屏下加载了过小的图。
