不裁剪图片，仅按media条件选择预裁剪的源图；常见失效原因包括media写在标签上、缺少括号、置于后、断点重叠及顺序错误（须从宽到窄）；必须存在且含src与alt，作为语义和降级保障。
<picture></picture> 本身不裁剪图片，它只负责把不同构图的图片按条件交给浏览器——真正实现“艺术裁剪”的是提前为移动端、平板、桌面分别准备好裁剪好的源图，<picture></picture>只是按 media 条件选哪一张。
为什么写了 media 却总加载同一张图？
常见原因不是逻辑写错，而是 <source></source> 的匹配顺序或语法失效：
-
media属性写在<picture></picture>上（比如<picture media="(max-width:768px)"></picture>）→ 浏览器完全忽略，必须写在每个<source></source>内 -
media="(max-width: 768px)"缺少括号 → 写成media="max-width: 768px"就静默失效 -
<source></source>放在<img>后面 → 浏览器直接跳过所有<source></source>，只加载<img src> - 断点重叠，比如同时存在
(min-width: 768px)和(max-width: 768px)→ 768px 宽度会命中第一个，后面规则不执行
<source></source> 的 media 顺序必须从宽到窄
浏览器是线性扫描，遇到第一个为 true 的就停，不会继续比对。所以顺序决定实际生效的规则：
✅ 正确（桌面 → 平板 → 手机）：<source media="(min-width: 1200px)" srcset="hero-desktop.jpg"></source><source media="(min-width: 768px)" srcset="hero-tablet.jpg"></source><source media="(max-width: 767px)" srcset="hero-mobile.jpg"></source>
❌ 错误（手机规则放最前）：<source media="(max-width: 767px)" srcset="hero-mobile.jpg"></source><source media="(min-width: 768px)" srcset="hero-tablet.jpg"></source><source media="(min-width: 1200px)" srcset="hero-desktop.jpg"></source>
→ 所有设备都走第一条，宽屏永远拿不到桌面图
如何让 <img> 真正成为可靠 fallback？
<img> 不是可选项，它是语义、可访问性和降级的最后防线：
- 必须存在，且带
src和alt；漏掉alt会导致屏幕阅读器无法描述，旧版 Safari 可能拒绝加载 - 不能写成自闭合：
<img>或<img>→ 必须是<img src="..." alt="..."> - 推荐也给
<img>加srcset和sizes，尤其当 fallback 图也要适配 2x 屏时（比如srcset="fallback-1x.jpg, fallback-2x.jpg 2x"） - 如果发现页面空白，先打开 Network 面板：所有
<source></source>请求是否返回 404？或者被 MIME 类型拦截（比如服务器没配好webp类型）？
艺术裁剪的本质是内容决策前置——你得先想清楚手机上要突出人脸、桌面要展现场景全貌，再切图、命名、写 media 断点。浏览器只管选，不替你裁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
