实现多端适配的核心是手动定义的media断点并按从宽到窄顺序排列，浏览器匹配首个真值即加载对应图片；漏、media缺括号、顺序颠倒或断点不合法均导致回退至src兜底图。
直接结论：用 <picture></picture> 实现多端，核心不是“自动适配”，而是靠 <source></source> 的 media 属性手动定义断点，并按顺序让浏览器选第一个匹配项；漏掉 <img>、media 写错括号、顺序颠倒，都会导致只加载兜底图。
为什么写了 <source></source> 却总加载 <img src>
90% 的失效不是浏览器不支持，而是所有 <source></source> 都被跳过了：
-
media值缺括号，比如写成media="max-width: 768px"→ 浏览器完全忽略该<source></source> - 断点顺序反了：把
media="(max-width: 767px)"放最前 → 所有设备宽度 ≤767px 都命中它，后面更宽的规则根本没机会执行 - 所有
<source></source>的media都不满足当前视口宽度（比如断点写成1200px却没带单位），浏览器静默回退到<img src> - 漏掉
<img>标签，或写了但没src和alt→ 页面留白，不报错也不提示
media 断点怎么写才不踩坑
断点必须是合法 CSS 媒体查询，且顺序决定匹配逻辑——浏览器从上到下扫描，遇到第一个为真就停：
- ✅ 推荐顺序：宽屏 → 中屏 → 小屏（从大到小）
<source media="(min-width: 1200px)" srcset="desk.jpg"></source><source media="(min-width: 768px)" srcset="tab.jpg"></source><source media="(max-width: 767px)" srcset="mob.jpg"></source> - ❌ 错误示例：
media="768px"（缺单位）、media="tablet"（非法值）、media="(max-width: 768px) and (orientation: landscape)"（orientation在 iOS Safari 行为不一致） - ⚠️ 避免断点重叠或间隙：比如
max-width: 768px和min-width: 768px在恰好 768px 宽时都为真，但浏览器只认第一个，结果不可控
srcset 和 sizes 在多端里怎么配合
如果只做构图切换（art direction），每个 <source></source> 的 srcset 可以只放一个路径；但如果还要适配高 DPR 屏（如 iPhone 的 @2x 图），就得在 <img> 或对应 <source></source> 里补 x 描述符，并注意：
-
sizes只能写在<img>上，不能写在<source></source>里；它的作用是告诉浏览器“这张图在页面中大概占多宽”，浏览器再结合设备 DPR 计算需加载哪张物理分辨率图 - 例如：
sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"，对应移动端全宽、平板半宽、桌面固定比例 - 混用
w和x（如photo-400w.jpg 1x, photo-800w.jpg 2x）会导致整个srcset被浏览器忽略，回退到<img src> -
<img>的srcset必须存在且语法合法，否则高 DPR 屏可能加载过小图而模糊
什么时候该用 <picture></picture>，而不是直接 <img srcset>
<picture></picture> 不是“高级版 <img>”，它是为特定需求设计的：
- 需要不同构图：手机截图裁竖版、桌面截图展全景 → 必须用
<picture></picture>+media - 需要格式降级：优先 WebP，不支持则 fallback 到 JPEG → 用
type属性控制 - 只需要适配 DPR（如 Retina 屏加载 @2x）或单纯按视口宽度换尺寸 → 直接用
<img srcset>更轻量、容错更强
真正容易被忽略的是：所有 <source></source> 的 media 都必须覆盖真实视口宽度，且和项目 CSS 断点保持一致；否则样式和图片会错位——这不是 bug，是结构没对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
