一次改版顺手把 picture 里几条 source 的顺序调了一下，上线后手机端全在加载桌面大图 📷。流量翻倍，版面还不对。查完才彻底记住匹配规则，写下来免得再犯。
规则一：自上而下，命中即停
浏览器从上往下逐条评估 source，第一个 media 条件为真的立即生效，后面全部跳过。顺序写反，兜底条件先命中，精心准备的窄屏图就成了摆设 ⚠️。
规则二：全不命中才轮到 img
所有 source 的 media 与 type 都不通过时，才回退到内部 img 的 src 或 srcset。img 不是第一选择，是最后一道保险。
规则三：评估时机不靠 JS
media 属性只在两个时机评估：元素插入 DOM，以及窗口 resize。用 JS 动态改 media 属性不会触发重新选择，想运行时切换图片只能替换 srcset 或换 DOM。
规则四：type 先行过滤
浏览器不支持 source 声明的 type 格式时，整条 source 直接跳过，media 都不再看。所以格式降级链与断点链可以混排，互不干扰 ✅。
推荐的排列方式
断点场景按宽屏优先、窄屏兜底书写，与 min-width 从大到小对应；格式场景按 AVIF、WebP、JPEG 排列，越新越靠前。两条链各管各的，顺序思路一致：条件越具体越靠后兜底，越特殊越靠前优先。