viewport标签必须静态置于head顶部，否则srcset和sizes全部失效；其content值须为width=device-width, initial-scale=1.0，缺失、错位、动态插入或重复声明均导致浏览器按980px解析DOM，响应式图片逻辑完全崩溃。
没写 viewport 标签，或者写了但位置/内容错，后面所有响应式图片逻辑都会失效——浏览器按 980px 宽度解析 DOM，srcset 和 sizes 全部算错。
viewport 标签必须静态放在 最顶部
它不是可选配置，是响应式图片的前置开关。漏掉、放
里、动态插入、重复声明，都会导致浏览器跳过响应式计算。-
content必须是width=device-width, initial-scale=1.0，不能写成width=375或加user-scalable=no - SSR 渲染时容易漏掉这行，真机加载完 DOM 才发现已锁定布局宽度
- 验证方式：Chrome DevTools 切手机模式 → 右键“查看网页源代码”，确认该标签在
<head>开头附近且仅出现一次
img 的 max-width: 100% 和 height: auto 必须成对出现
只写 max-width: 100% 是视觉欺骗——图片照样下载 2MB 大图再缩到 375px 显示，带宽白耗，首屏卡顿。
- 漏掉
height: auto会导致图片被拉伸或压扁，因为浏览器不会自动保持宽高比 - 父容器是
display: flex时，子img还要额外加min-width: 0，否则 flex 默认的min-width: auto会阻止收缩 - 别用
width: 100%替代，小图会被强行拉宽失真
srcset + sizes 配对错误等于没写
浏览器不报错，但会静默退化为只加载 src，srcset 整个被忽略。
立即学习“前端免费学习笔记（深入）”；
-
srcset必须统一用w描述符（如photo-480w.jpg 480w）或统一用x（如photo.jpg 2x），混写直接失效 -
sizes是字符串，不是 CSS，不支持calc()；必须覆盖全部视口断点，且每段值要和真实 DOM 渲染宽度一致——比如图片在栅格中占 1/3 宽，sizes就不能硬写100vw，得是33.33vw - Safari 12.1 之前不支持
w描述符，旧 iOS 设备会降级为按 DPR 粗略匹配，得靠<picture>回退
<picture> 的 <source> media 属性写错就静默跳过
浏览器不会提示，Network 面板里根本看不到请求，直接 fallback 到内部 <img>。
-
media必须是合法完整的 CSS 媒体查询：(max-width: 768px)✅，max-width: 768px❌（缺括号），768px❌（非查询） -
media和type是 AND 关系：任一条件不满足，整条<source>被跳过；type="image/webp"拼错分号或大小写，整条失效 - 断点要和真实 CSS 布局一致，避免重叠或间隙，推荐用开区间：从
max-width: 767px→min-width: 768px→min-width: 1024px
真正麻烦的从来不是语法写错，而是 CSS 布局变了但 sizes 没同步更新，或者 srcset 提供的宽度候选值和实际渲染宽度差了一截——这种问题在多设备测试时才暴露，但修复成本已经很高。
