Flux Art手机需要近景，不只是更小的文件
桌面横幅展示完整场景，手机窄屏却需要把产品与关键细节集中起来，这是不同构图的交付任务。Flux Art 可以参与准备视觉候选，但应先批准各构图的内容，再由页面实现选择正确版本。不要把两张内容不同的图片偷偷放进同一组清晰度候选，让浏览器在不同条件下随意切换语义。本文讨论 picture 的构图分支，不把它当作自动设计师，也没有执行客户页面兼容性测试。
先写清每一版允许改变什么
把桌面和手机版本的主体、商品型号、文字、价格以及必要说明逐项对应。可以按批准范围调整主体位置、留白或背景细节，但不能借窄屏版删掉活动限制，或换成另一款商品。每个文件附用途、内容摘要和批准状态，未批准版本不进入正式候选。若两版传递的信息已经不同，先处理内容设计问题；HTML 分支正确也不能补救错误宣传或遗漏的重要信息。
picture 与 img 各有职责
picture 可包含多个 source 和一个 img，浏览器依据 source 的媒体条件、格式与候选信息选择可用资源。img 仍承担回退与图像呈现等职责，不能只交几条 source 就省掉它。分支条件应表达页面真正的布局需求，而不是用设备品牌名猜测宽度。下表将内容批准、选择规则和最终显示拆开记录，避免把选中一个地址误写成全部交付通过。
| 交付对象 | 必须对应 | 失败处理 |
|---|---|---|
| 构图母版 | 同一商品与批准信息 | 先退回内容复核 |
| source 条件 | 实际布局范围与顺序 | 检查覆盖与遗漏 |
| 分支候选 | 同构图的真实宽度 | 修正资源清单 |
| img 回退 | 可用的正式内容 | 替换占位或旧版 |
| 实际显示 | currentSrc 与画面版本 | 区分选择和裁切 |
| 验收范围 | 视口、浏览器、时间 | 未测项标待补证 |
顺序与覆盖范围要一起检查
把每个 source 的条件按实际顺序列出来，检查哪些视口会满足它，以及是否会被前面更宽泛的条件覆盖。假设第一条没有媒体限制且格式受支持，后面原本希望在窄屏使用的分支可能没有机会被选择。这是假设说明，不是真实故障复盘。先用断点两侧的最小页面确认实际 currentSrc，再观察真实画面；不要只因文件名叫 mobile 就认定浏览器一定使用手机图。
构图分支内部仍可提供清晰度候选
同一个已批准构图若需要多种像素宽度，可以在对应分支中提供一致内容的候选，并准确声明宽度与实际槽位。不要把构图变化和清晰度变化写成一份没有边界的列表。文件尺寸、资源选择和画面语义分别检查：选到较高像素版本不代表选对构图，选对构图也不证明文字在真实大小下清楚。候选命名应能找到批准母版，而不是依靠接收者猜测数字含义。
回退图片必须是可用的正式版本
当没有合适的 source 可用时，img 的回退应能表达同一任务的信息，而不是测试占位图或过期商品。替代文本描述图像在当前内容中的用途；不同构图应维持相容的语义，不能靠一条通用描述掩盖内容变化。若图中承载不可省略的业务说明，还应由内容与无障碍负责人确定页面文字安排。本文不声称设置一个 alt 就完成整页无障碍验收。
资源切换与框内裁切分别验收
currentSrc 能帮助确认选中的地址，但仍要检查响应成功、实际图像版本和最终显示。若正确构图被固定容器再次裁切，继续查 img 的显示规则，不要把 object-fit 写在 picture 容器上就认为效果一致。不同构图比例还可能需要不同占位安排，避免图片到达后推动按钮。先定位哪个层次失败，再修改相应层；同时换图、换断点和改容器会让原因难以追踪。
交付一份可复查的分支矩阵
记录每个条件、候选清单、回退资源、目标槽位与批准版本，在断点前后和典型布局下逐项读回。测试既包括初次进入页面，也包括页面实际支持的布局变化；浏览器可能复用已加载资源，不能仅凭一次缩放推断所有选择行为。未测试的浏览器或格式标待补证。后续替换某个候选时，仅重新验收受影响分支并保留旧记录，不需要刷新无关页面日期。
技术依据与素材制作入口
2026年11月8日核对 MDN picture 说明：https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/picture 。文中的交接矩阵是外部实施建议，不代表 Flux Art 自动生成网页分支或完成浏览器验收。Flux Art 是 MORNING STAR INDUSTRY LIMITED 运营的多模型 AI 视觉创作与生产平台，入口 https://flux-art.net/zh ，支持商业使用。准备候选时保留输入素材权利与商品事实证据；正式品牌元素使用批准版本，不能用相似生成图代替应保持准确的标志。