浏览器按中从上到下短路匹配，首个满足media和type的即生效，其余忽略；media值缺括号、顺序错乱、单位缺失或断点重叠均导致匹配失败而回退至。
为什么写了却只加载![]()
的src
所有，根本不是兼容性问题，而是匹配逻辑被破坏了。浏览器从上到下扫描
media和/或type的就停，其余全忽略。
常见硬伤包括：
-
media="(max-width: 768px)"漏掉括号 → 写成media="max-width: 768px"，整个条件静默失效 -
<source></source>放在<img>后面 → 浏览器根本不解析，直接跳过整组 - 服务器返回
image/webp但响应头是Content-Type: image/jpeg→ Chrome 标为blocked:mime-type，该作废 - Safari 16.4 之前版本中
<img>没写src属性 → 页面空白，无报错、无提示
media断点顺序和写法怎么才不翻车
media必须写在<source></source>里，且顺序决定结果——这不是“多选”，是“短路匹配”。宽屏规则放前面，窄屏兜底放最后，否则小屏设备永远卡在第一条。
正确写法示例：
<source media="(min-width: 1200px)" srcset="hero-desktop.jpg"><source media="(min-width: 768px)" srcset="hero-tablet.jpg"><source media="(max-width: 767px)" srcset="hero-mobile.jpg"></source></source></source>
关键细节：
- 单位不能省：
768无效，必须是768px - 避免重叠断点：比如
(min-width: 768px)和(max-width: 768px)在恰好 768px 时行为不可控，推荐用max-width: 767px→min-width: 768px→min-width: 1201px -
media不能写在<picture></picture>标签上，写了也白写
srcset里的x和w能不能混用
不能。同一srcset中同时出现400w和2x，整个值被浏览器视为无效，回退到src，DPR 和宽度匹配全失效。
两套逻辑必须分开用：
- 纯 DPI 切换（如按钮图标）→ 只用
x描述符：srcset="icon@1x.png 1x, icon@2x.png 2x, icon@3x.png 3x"，且<img>上**不要写sizes，写了就禁用x匹配 - 视口宽度变化（如横幅图）→ 只用
w描述符：srcset="hero-400w.jpg 400w, hero-800w.jpg 800w"，且<img>上**必须配sizes，如sizes="(max-width: 768px) 100vw, 50vw" -
<source></source>里的srcset只按顺序取第一个资源，2x被完全忽略——DPR 适配只能交给最外层<img>的srcset
IE 和旧 Safari 怎么让它不彻底失效
IE8–10 完全不识别<picture></picture>和<source></source>，连 DOM 节点都不创建；IE11 原生支持但w描述符支持不全；Safari 16.4 之前版本要求<img>必须带src，否则空白。
保底方案要分层落地：
- 先加
html5shiv解决标签识别，再补 CSS：picture { display: block; }，否则 IE 下无法设宽高 - 真正需要响应式切换？必须引入
picturefill@4.3.2（最后兼容 IE9+ 的稳定版），v5+ 已放弃 IE 支持 - 加载顺序不能乱：
html5shiv→picture { display: block; }→picturefill - 纯降级写法（不用 JS）：把关键 fallback 图放进
<img src>，确保它在所有浏览器中尺寸一致，<source></source>只给现代浏览器用
最容易被忽略的是：即使结构全对，如果<img>没写alt，屏幕阅读器就无法读取，可访问性直接不达标；而<source></source>本身不参与语义，alt 必须靠<img>承载。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
