<source> 的 media 属性仅匹配设备条件并选择对应图片文件，不执行裁剪；裁剪必须预先完成并存为不同构图的独立图片，浏览器原样加载渲染。
必须提前准备多张人工裁切好的图片，<source> 的 media 属性只负责“选哪张”，不负责“怎么切”。
为什么写了多个 <source> 还是没切换图片
常见错误是误以为浏览器会自动对同一张原图做裁剪。实际行为是：浏览器按顺序匹配 <source media="...">，一旦命中，就加载其 srcset 指向的完整图片文件，然后原样渲染——裁剪逻辑完全由你导出的图片构图决定。
-
media值必须是合法 CSS 媒体查询，括号不能漏，比如(max-width: 768px)有效，max-width: 768px无效 - 多个
<source>必须从宽到窄（或窄到宽）有序排列，浏览器“遇真即停”，顺序错会导致小屏被宽屏规则覆盖 -
<img>是强制 fallback，哪怕只写一个src也必须存在，否则无图显示 - iOS Safari 对
type="image/webp"+media组合有解析延迟，可能闪白屏，建议优先用srcset+media，避免混用type
media 和 sizes + srcset 怎么配合用
单纯靠 media 只能粗筛设备类型（比如“手机用这张，桌面用那张”），如果还要在同一断点内适配不同 DPR 或视口缩放，就得加 sizes 和带 w 描述符的 srcset。
- 例如手机断点下图片占满视口：
media="(max-width: 768px)" srcset="hero-mobile-320w.jpg 320w, hero-mobile-640w.jpg 640w" sizes="100vw" - 桌面断点下固定宽 800px：
media="(min-width: 769px)" srcset="hero-desktop-800w.jpg 800w, hero-desktop-1600w.jpg 1600w" sizes="800px" -
sizes值必须是有效长度或媒体条件，不能写成width: 800px或800 - 如果只用
x描述符（如1x, 2x），就不能和media同时出现在同一个<source>上
移动端优先时 <source> 的顺序怎么排
把最常用、最可能命中的 <source> 放在前面，避免浏览器 fallback 到 <img src> 的低清兜底图。
立即学习“前端免费学习笔记（深入）”；
- 推荐结构：先写
max-width: 768px（手机+小平板），再写min-width: 769px（大平板+桌面），最后是<img> - 别写
min-width: 1024px) and (orientation: landscape)这类组合，桌面浏览器通常不报告orientation，整个<source>会被跳过 - 检查是否生效？打开 Chrome DevTools → Network 面板，刷新页面，右键图片 → “Copy image src”，看路径是否符合预期断点
真正容易被忽略的是：所有 srcset 中列出的图片文件必须真实存在，且命名/路径与 HTML 中完全一致；少一个 @2x 版本，高 DPR 设备就会加载 1x 图并拉伸模糊。
