应优先用 实现 dpr 切换， 真正价值在于响应视口宽度、dpr、格式、系统偏好等多条件；其 必须规范书写 media（含括号）、置于 前、按从宽到窄或明暗顺序排列，且 不可省略。
别用 <picture></picture> 单纯为了换 DPR（比如只配 1x/2x），直接用 <img srcset> 更稳、更轻、兼容性更好。 <picture></picture> 的价值不在“换图”本身，而在于它能同时响应多个条件：视口宽度 + 设备像素比 + 图片格式 + 系统偏好（如暗色模式）。强行套 <picture></picture> 只写 srcset 不写 media 或 type，浏览器会忽略所有 <source></source>，直接 fallback 到 <img> —— 你根本没在用它。
为什么写了 <source></source> 却总加载 <img src>
这不是浏览器“不工作”，而是条件没触发或语法失效：
-
media值缺括号，比如写成media="max-width: 768px"→ 实际必须是media="(max-width: 768px)"，否则整条<source></source>被静默跳过 -
<source></source>写在<img>后面 → 浏览器只读到<img>就停了，前面的<source></source>根本不解析 - 当前视口宽度没落在任一
media区间内（比如断点设成(min-width: 769px)和(max-width: 768px)，768.5px 宽度就无匹配）→ 自动退到<img src> -
<source></source>只写了src没写srcset或type→ 规范要求至少含其一，否则该节点无效
<source></source> 的 media 顺序为什么不能乱
浏览器从上到下扫描，**匹配第一个为 true 的就停止**，不会继续往下看：
- ✅ 正确顺序：
media="(min-width: 1200px)"→media="(min-width: 768px)"→media="(max-width: 767px)" - ❌ 错误顺序：
media="(max-width: 767px)"放最前 → 所有小屏设备永远卡在这条，宽屏规则永远不执行 - ⚠️ 边界重叠风险：比如同时存在
(min-width: 768px)和(max-width: 768px)，768px 宽度会命中前者，但行为不可控，建议用767px和768px明确切开
想支持暗色模式或节日主题，<picture></picture> 怎么写才真生效
<picture></picture> 不监听变化，但现代浏览器（Chrome/Firefox/Safari 15.4+）会在系统主题切换后自动重选并替换已渲染图片——前提是写法完全合规：
- 暗色模式必须写完整：
media="(prefers-color-scheme: dark)"，不能简写为dark或漏括号 -
<source></source>顺序很重要：暗色必须放在亮色前面，Safari 中颠倒会导致暗色规则被忽略 - 节日主题等非原生媒体特性（如
theme-christmas）无法用media直接匹配 → 得靠 JS 控制显隐多组<picture></picture>，或动态改<img src>，不能依赖<source></source>自动切换 -
<img>的src不可省：它是唯一实际渲染的节点，没它整个<picture></picture>区域空白
最容易被忽略的不是语法，而是 <img> 必须带 src 且不能自闭合；还有服务器返回的图片 MIME 类型要是 image/jpeg 这类正确值，否则即使路径对，也会静默 fallback 到 src。真要验证是否加载了 2x 图，别猜，用 DevTools → Rendering → Emulate device-pixel-ratio: 2，再刷页面看 Network 请求路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
