art direction 是为不同屏幕提供语义更合适的图片版本，如手机裁人脸、桌面展全景，解决“该看什么”；响应式缩放用 sizes+srcset 解决“该加载多宽的图”，目标不同。
什么是 art direction，和响应式缩放有什么区别
art direction 不是让同一张图拉伸或缩放，而是为不同屏幕提供语义上更合适的版本：手机端裁切人脸特写，桌面端展示完整场景。它解决的是“该看什么”，而不是“该多大”。响应式缩放（如 sizes+srcset with w）解决的是“该加载多宽的图”，两者常混用，但目标完全不同。
怎么用 <source></source> 的 media 属性实现构图切换
核心就是给每个 <source></source> 写明确的视口断点，并配对应构图的图片路径：
- 断点必须覆盖所有常见宽度，且避免重叠或间隙——比如
max-width: 480px、min-width: 481px) and (max-width: 768px)、min-width: 769px -
<source></source>按顺序匹配，第一个media为真就停，后面的全忽略；所以宽屏规则要放前面，窄屏兜底放最后 - 每个
srcset只需一个路径（如hero-mobile-crop.jpg），不用写1x/2x——那是分辨率适配的事，不是 art direction 的重点 - 别用
orientation: landscape做条件，iOS Safari 和部分桌面浏览器行为不一致，容易失效
sizes 和 srcset 在 art direction 场景下要不要写
要写，但目的不是帮选图，而是防止小屏误加载大图：
-
sizes必须写在<img>上，不能写在<source></source>里；例如sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw" - 如果只做 art direction（不同构图），
srcset里可以只放一个文件，不加w或x描述符；但如果同时想支持 Retina 屏，就得补上2x版本，此时srcset="hero-mobile@1x.jpg 1x, hero-mobile@2x.jpg 2x" - 混用
w和x会直接导致整个srcset被浏览器忽略，回退到<img>的src
最容易被跳过的三个硬性要求
缺一不可，否则页面留白或降级失败：
-
<picture></picture>内最后一个子元素**必须是<img>**，且带src和alt；没有它，不匹配任何<source></source>时区域就是空的 - 所有
srcset和<img>的src路径必须真实存在；404 不报错，只会静默 fallback，调试得靠 Network 面板清缓存后确认实际加载项 -
<source></source>的media值必须是合法 CSS 媒体查询，写成media="768px"或media="tablet"会被完全忽略
真正起作用的是浏览器在加载阶段的自动匹配，不是 JS 控制；写对结构和断点，它就自己动，但写错一点，就彻底不动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
