必须写viewport、sizes须与真实CSS渲染宽度一致、srcset禁混用w和x描述符；viewport需静态置于head顶部，sizes要覆盖全部断点且值可实测，srcset仅用于尺寸/DPR适配，构图切换才用picture。
团队落地响应式图片，核心不是选 <picture> 还是 <img>，而是统一 enforce 三条硬规则：必须写 viewport、sizes 必须与真实 CSS 渲染宽度一致、srcset 中不能混用 w 和 x 描述符。
viewport 标签必须静态声明在 <head> 开头
这是所有响应式逻辑的起点。漏掉、动态插入、写在 <body> 里，或内容写成 width=375，都会导致浏览器按桌面模式（980px）解析布局——sizes 算错、media 查询失效、图片撑破容器全由此起。
团队规范应强制检查：
- 每个 HTML 模板的 <head> 最顶部必须有且仅有一行：<meta name="viewport" content="width=device-width, initial-scale=1.0">
- SSR 渲染模板中该标签不可条件渲染
- CI 流程中用正则扫描 HTML 输出，匹配失败即阻断构建
- Chrome DevTools 切手机模式后右键“查看网页源代码”，确认它出现在 <head> 前三行内
sizes 属性必须覆盖全部视口且每段值真实可测
sizes 是字符串，不是 CSS；浏览器靠它推导“这张图会占多宽”，再结合 srcset 选资源。写错就等于没写，浏览器直接退化加载 src 或最大图。
常见翻车点：
- 写成笼统的 sizes="100vw"，但实际图在 flex 容器中只占 50% 宽 → 加载两倍大图
- 断点缺失，比如 sizes="(max-width: 768px) 100vw, 33vw" → 最后一项无媒体条件，整条被忽略
- 空格不合法：旧版 Edge 对 (max-width: 768px) 中的空格敏感，(max-width:768px) 才有效
- 用 calc() 或 CSS 变量 → 语法非法，直接失效
团队建议写法：sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"，三段覆盖全部视口，且每段数值需对应真实 DOM 渲染宽度（可用 DevTools 的 Layout 面板实测）
立即学习“前端免费学习笔记（深入）”；
srcset 与 picture 的使用边界必须明确
不是越复杂越好。<img> + srcset + sizes 足够应对 90% 的尺寸+DPR 适配；只有当需要「构图切换」或「格式强制降级」时，才动用 <picture>。
团队规范要点：
- 同一 srcset 中禁止混用 480w 和 2x：浏览器一旦见到 x，整个属性按像素密度模式解析，sizes 彻底失效
- <picture> 内 <source> 必须从高优先级往低优先级排：WebP 在 JPEG 前、min-width 大的断点放前面
- 每个 <source> 必须带 media 或 type，二者都缺会被忽略
- <img> 必须在 <picture> 最末尾，且 src 和 alt 不可省略；它不是备选，是唯一渲染载体
基础 CSS 规则必须全局注入
没有 max-width: 100% 和 height: auto，响应式图片就不存在。这不是可选项，是底线。
团队应将以下规则作为全局基础样式（不可覆盖、不可条件加载）：img { max-width: 100%; height: auto; display: block; }
- 漏掉 height: auto → 图片变形（尤其 flex/grid 容器中）
- 用 width: 100% 替代 → 小图被强行拉伸失真
- 不加 display: block → 行内元素默认 baseline 对齐，底部留白
注意：该规则只作用于语义化 <img>，背景图、SVG、Canvas 不在此列
真正难统一的不是语法，而是对“真实渲染宽度”的共识——设计师给的稿子说“占 1/3”，前端实现用 grid，后端模板却套了 flex，sizes 就必然错。规范要管住的，是那个宽度数字从哪来、谁负责校验、出错了怎么回溯。
