picture标签本身不裁剪图片，仅按media条件选择预裁剪的源图；必须提前准备多张不同构图的图片，且顺序须从宽到窄、media语法正确、作为必需fallback存在并含src与alt。
picture 标签本身不裁剪图片，只做源图选择
这是最容易误解的点：picture 不是 CSS clip-path，也不调用 Canvas API，它完全不碰像素。你写的任何 media 查询都只是告诉浏览器「在什么条件下加载哪张图」——而那张图必须是你提前手动裁剪好、导出好的。如果只有一张原图，picture 再怎么写也变不出三张构图不同的图。
source 的 media 顺序错位会导致所有设备都加载同一张图
浏览器对 <source></source> 是从上到下线性扫描，匹配第一个为 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)" ...></source>一写上去，桌面端也命中这条，永远加载不了hero-desktop.jpg - ⚠️ 断点缝隙风险：比如
(min-width: 768px)和(max-width: 767px)之间没有重叠，但若漏掉 768px 这个精确值（如写成max-width: 767px+min-width: 769px），768px 宽度设备会跳过所有<source></source>，直接 fallback 到<img>
img 标签不是装饰，是强制 fallback 且必须闭合
<img> 在 <picture></picture> 中不是可选项，它是语义基础、可访问性入口、旧浏览器降级通道，也是所有 media 都不匹配时的兜底加载项：
- 必须存在，且必须带
src和alt属性，写成<img src="fallback.jpg" alt="首页主视觉">——不能自闭合为<img>，Safari 和部分 iOS 版本会直接不渲染 -
<source></source>必须写在<img>之前，否则浏览器直接跳过全部<source></source>，只加载<img src> - 推荐给
<img>也加srcset和sizes，尤其当 fallback 图也要适配 Retina 屏时（例如srcset="fallback-1x.jpg 1x, fallback-2x.jpg 2x"）
media 属性写错位置或语法错误会静默失效
常见失效不是浏览器不支持，而是条件根本没被识别：
- ❌ 把
media写在<picture></picture>上：<picture media="(max-width: 768px)"></picture>→ 浏览器完全忽略该属性 - ❌ 缺少括号：
media="max-width: 768px"（错） vsmedia="(max-width: 768px)"（对）→ 前者静默失效，Network 面板里看不到任何<source></source>请求 - ❌ 路径 404 或 MIME 类型错误：即使
media匹配成功，若srcset指向的图片返回 404 或服务器未正确设置Content-Type: image/jpeg，浏览器也会退回到<img>
真正精细的裁剪适配，难点不在 HTML 写法，而在于设计侧是否为每个断点准备了语义明确、焦点清晰、尺寸与压缩比都经过权衡的独立图像源——picture 只是那个准时把对的图递到对的地方的人。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
