浏览器按<source>从上到下的顺序匹配media或type，匹配成功即停止，故顺序错误会导致加载错误；<img>是必需的回退项，必须含有效src和alt；<picture>无样式，需CSS控制<img>尺寸与响应式行为。
picture 标签里 的顺序为什么不能乱
浏览器按 <source> 在 DOM 中的**从上到下顺序**逐个匹配 media 或 type 条件，一旦匹配成功就停止，不再检查后续 <source>。所以顺序错 = 图片加载错。
常见错误现象：桌面端加载了手机图、WebP 图没生效、小屏反而用了大图。
- 把最宽/最高清/最新格式（如
type="image/webp"）的<source>放在最后，作为“兜底优质资源” - 按视口从大到小写
media时，用(min-width: 1200px)→(min-width: 768px)→ 默认<img>；若反过来用max-width，则必须从小到大排列 - 含
type的<source>建议放在靠前位置（因格式支持判断快于媒体查询），但需确保它不被前面更宽泛的media拦截
img 标签在 picture 里不是可选的，而是强制回退点
<img> 不是“默认图”，而是当所有 <source> 都不匹配、或浏览器根本不支持 <picture>（如 IE11）时的唯一 fallback。它必须存在，且必须带 src 和 alt。
容易踩的坑：删掉 <img>、只留 <source> → 页面空白；或者只写 alt 不写 src → 加载失败且无提示。
立即学习“前端免费学习笔记（深入）”；
-
<img src="fallback.jpg" alt="描述文字">中的src路径必须有效，建议用体积小、兼容性高的格式（如 JPEG） - 不要给
<img>设width/height属性来“控制尺寸”——它只是 fallback，尺寸应由 CSS 统一管 - 若想让 fallback 图也响应式，只需对
picture img写 CSS：picture img { max-width: 100%; height: auto; }
picture 本身没有样式，真正起作用的是 CSS 对 img 的约束
<picture> 是纯逻辑容器，不渲染、无盒模型、不占空间。它的宽高完全由内部 <img> 决定，而 <img> 的尺寸表现又极度依赖 CSS —— 不设样式，图片大概率会溢出、拉伸或塌陷。
典型问题：大图在手机上撑满屏幕但高度失控、Flex 容器中图片消失、CMS 插入后布局跳动。
- 必须写：
picture img { display: block; max-width: 100%; height: auto; }——display: block消除行内元素默认间距，max-width防溢出，height: auto保比例 - 若需固定宽高比（如首页 banner），不用
width/height属性，改用 CSS aspect-ratio：picture { aspect-ratio: 16 / 9; }+picture img { width: 100%; height: 100%; object-fit: cover; } - 在 Grid/Flex 项中，父容器要设
min-width: 0（尤其 Chrome），否则max-width: 100%可能失效
media 查询写法要和设计断点严格对齐
<source media="(min-width: 768px)"> 这类写法看似简单，但实际效果取决于你 CSS 中定义的响应式断点是否一致。如果 CSS 用的是 @media (min-width: 769px)，那 <source> 就永远不匹配 768px 这一像素点。
更隐蔽的问题：DPR（设备像素比）未参与决策，导致 Retina 屏加载低清图。
- 推荐统一使用设计稿标注的断点值（如 375、768、1024、1440），并在 CSS 和
<source>中完全一致 - 需要适配高清屏时，别只靠
media，配合srcset的x描述符：srcset="logo@2x.png 2x, logo@3x.png 3x" - 避免混用
min-width和max-width在同一组<source>中——易漏覆盖区间，优先选一种风格到底
最常被忽略的其实是 <img> 的 alt 文本质量：它不光影响 SEO 和无障碍，还直接决定图片加载失败时用户看到什么。一个空 alt 或 “图片1” 这类占位符，在真实故障场景下会让整个区块失去语义支撑。
