浏览器只认写在<source>里的media，且必须带括号、顺序从宽到窄；否则静默跳过或仅加载<img>兜底图。常见错误包括：media缺括号、写在<picture>上、<source>置于<img>后、断点不匹配或顺序颠倒，导致图片不切换。
浏览器只认写在 <source> 里的 media，且必须带括号、顺序从宽到窄；否则要么静默跳过，要么永远只加载 <img> 回退图。
为什么写了 media 却没切换图片？
最常见原因是语法或位置错得“太安静”——浏览器不报错，只是直接忽略整个 <source>：
-
media="max-width: 768px"缺括号 → 浏览器当无效值处理，跳过该<source> -
<picture media="(min-width: 768px)">把media写在<picture>上 → 完全无效，规范明确只支持<source>内使用 -
<source>放在<img>后面 → 浏览器按 HTML 解析顺序，直接跳过所有<source>，只加载<img src> - 所有
<source>的media都不匹配（比如断点设成(min-width: 1200px)，但当前视口只有 1199px）→ 不报错，默默 fallback 到<img>
media 的断点顺序为什么必须从宽到窄？
浏览器是线性扫描，遇到第一个为 true 的 media 就立即加载对应 srcset，不再往下看：
- ✅ 正确顺序：
<source media="(min-width: 1200px)">→<source media="(min-width: 768px)">→<source media="(max-width: 767px)"> - ❌ 错误顺序：
<source media="(max-width: 767px)">放最前 → 所有手机、平板、桌面只要宽度 ≤767px 都命中它，后面两条永远不执行 - ⚠️ 边界重叠风险：比如同时存在
(min-width: 768px)和(max-width: 768px)→ 768px 宽度会固定命中前者，行为不可控
media 和 srcset+sizes 是什么关系？
它们不是互斥选项，而是分层协作：
立即学习“前端免费学习笔记（深入）”；
-
media控制「用哪一组图」：比如横屏加载宽构图，竖屏加载竖构图；或桌面加载全景图，手机加载裁剪特写图 -
srcset+sizes控制「这一组里选哪个分辨率版本」：同一断点下，根据设备像素比（1x/2x）或视口宽度变化（400w/800w）精细匹配 -
sizes必须写在<img>标签上，不是<source>上；漏写或单位错（如写成sizes="800"而非sizes="800px"）会导致浏览器按默认100vw计算，小屏也可能拉取大图
横竖屏切换怎么配 media？
用 (orientation: landscape) 和 (orientation: portrait) 最直接，但要注意它只响应屏幕方向，不感知宽度：
-
<source media="(orientation: landscape)" srcset="wide-800.jpg 1x, wide-1600.jpg 2x">→ 横屏时生效 -
<source media="(orientation: portrait)" srcset="tall-600.jpg 1x, tall-1200.jpg 2x">→ 竖屏时生效 - 两者可共存，但需注意：如果横屏时视口又很窄（比如折叠屏手机横置），
media="(orientation: landscape)"仍会匹配，此时建议叠加宽度判断，例如media="(orientation: landscape) and (min-width: 768px)" -
<img>仍是强制 fallback，必须存在且含src和alt；否则横竖屏都不匹配时页面会出现空白
真正容易被忽略的点是：你写的每一条 media 都在和浏览器的解析逻辑“赛跑”——它不理解你的意图，只严格按规范执行顺序匹配和语法校验。一个括号、一行位置、一个断点边界，就可能让整套适配失效。
