必须满足四个硬性条件：正确的顺序、合法的media值、末尾带src和alt的、且不能自闭合；否则浏览器会静默跳过直接加载。
标准 <picture></picture> 必须满足四个硬性条件：正确的 <source></source> 顺序、合法的 media 值、末尾带 src 和 alt 的 <img>、且 <img> 不能自闭合。
为什么浏览器只加载了 <img> 而不是 <source></source>
这不是浏览器“没选”，而是它根本没进入匹配逻辑——多数情况是 <source></source> 被静默跳过：
-
media="max-width: 768px"缺少括号 → 写成media="(max-width: 768px)"才合法 -
media="768px"或media="tablet"→ 非法媒体查询，整条<source></source>失效 -
<source></source>写在<img>后面 → 浏览器直接忽略，不解析 - 所有
media都不匹配 → 不报错，也不警告，默默 fallback 到<img src>
media 的顺序必须从宽到窄
浏览器从上到下扫描，遇到第一个为 true 的就停止，不会继续判断。顺序错会导致高分屏加载小图、桌面端卡在手机规则里：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- ✅ 正确：
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 alt="..."> 却没 src，整个区域就是空白——<img> 是唯一保证渲染的节点：
- 必须存在，且必须含
src和alt属性 - 不能写成
<img>或<img>→ 必须是<img src="..." alt="..."> - 推荐显式设置
width和height（或用aspect-ratio），避免 CLS（布局偏移）
什么时候该用 <picture></picture>，而不是 @@##@@
<picture> 不是“更高级的 <code><img srcset>”，它是为特定场景设计的：
- ✅ 真正需要艺术指导：桌面版展示全景，手机版只保留人脸特写 → 必须用
<source></source>+media - ✅ 强制格式降级：优先
image/avif，再image/webp，最后image/jpeg→ 用type属性 - ❌ 单纯适配 DPR 或视口宽度变化 → 90% 场景用
<img>更安全、更轻量
最容易被忽略的一点：你写的 media 值是否真被浏览器当作有效查询执行了？打开 DevTools 的 Network 面板，刷新页面，看实际加载的是哪张图——别靠肉眼猜，要靠请求记录验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
