<source>不裁剪图片，仅按media条件选择预裁剪源图；常见失效原因包括media写在<picture>上、缺括号、<source>置于<img>后、断点重叠及顺序错误（须从宽到窄）；<img>必须存在且含src与alt，作为语义和降级保障。
<source> 标签本身不裁剪图片，media 属性也不能让浏览器“动态缩放”或“智能裁剪”一张图——它只负责在多个**预先裁剪好**的源图中，按视口条件选一个加载。
为什么写了 media 却总加载同一张图？
这不是浏览器没执行，而是匹配逻辑被写错了。常见失效点包括：
-
media写在<picture>标签上（如<picture media="(max-width:768px)">）→ 浏览器直接忽略 -
media="(max-width: 768px)"少了括号，写成media="max-width: 768px"→ 静默失效，该<source>被跳过 -
<source>放在<img>后面 → 浏览器不扫描，全部忽略 - 断点重叠，比如同时存在
min-width: 768px和max-width: 768px→ 768px 宽度设备永远命中第一个，后面规则不生效
media 的顺序必须从宽到窄
浏览器是线性扫描，遇到第一个为 true 的就停，不会继续比对。所以顺序决定实际生效的规则：
✅ 正确（桌面 → 平板 → 手机）：<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 media="(max-width: 767px)" srcset="hero-mobile.jpg"><source media="(min-width: 768px)" srcset="hero-tablet.jpg"><source media="(min-width: 1200px)" srcset="hero-desktop.jpg">
→ 所有宽度 ≤ 767px 的设备都走第一条，1200px 宽屏也拿不到桌面图
srcset 在 <source> 中只管分辨率切换，不管布局宽度
当某个 <source> 的 media 匹配成功后，它的 srcset 只用于根据设备像素比（DPR）选图，比如 1x/2x。它不会根据元素实际占位宽度选图——那是 sizes 的事。
立即学习“前端免费学习笔记（深入）”；
如果你的 banner 图在小屏占满视口、大屏只占 800px 宽，就得配合 sizes：
<source media="(max-width: 768px)" srcset="sm-400w.jpg 400w, sm-800w.jpg 800w" sizes="100vw"><source media="(min-width: 769px)" srcset="lg-800w.jpg 800w, lg-1200w.jpg 1200w" sizes="800px">
漏掉 sizes，浏览器无法判断“这张图大概多宽”，srcset 中的 w 描述符就形同虚设，很可能回退到 <img src>。
真正容易被忽略的兼容性细节
所有 media 查询必须是合法 CSS 媒体查询字符串，不能是纯数字或自定义关键词；<img> 必须存在且含 src 和 alt，否则页面留空不报错；服务端返回的 Content-Type 必须和 type="image/webp" 完全一致（逐字符），否则 Chrome 显示 (blocked:mime-type)；iOS Safari 对 min-resolution 类查询支持极差，优先用 min-width + orientation 组合。
