移动端优先必须从viewport和srcset首行落地：viewport须静态置于head最顶部且唯一，否则sizes失效、srcset乱套；img需配srcset+sizes精准匹配布局宽度，picture用于艺术方向或格式降级，顺序与断点必须严格合规。
移动端优先不是口号，是必须从 <meta name="viewport"> 和 srcset 第一行就落地的实操逻辑。不按这个顺序写，图片在手机上要么撑破、要么模糊、要么白加载2MB。
viewport 标签必须放在 head 最顶部且只写一次
这是所有响应式图片生效的前提。如果它缺失、错位或被重复插入，sizes 里的 vw 单位直接失效，浏览器按 980px 宽度解析 DOM，后续所有 srcset 选择都乱套。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">必须静态写在<head>开头，不能用 JS 动态注入 - 别加
user-scalable=no或maximum-scale=1.0，会锁死可访问性 - 真机调试时右键“查看网页源代码”，确认这行在
<head>里排第一
img + srcset + sizes 才算真正移动端优先
只写 img { max-width: 100%; height: auto; } 是假响应式——它不阻止浏览器下载桌面图，只是缩着显示。真优先，得让浏览器在解析 HTML 阶段就知道：“这张图在手机上只占 100vw 宽，给我 400w 的就够了”。
-
srcset列出小尺寸图优先：比如"photo-400w.jpg 400w, photo-800w.jpg 800w, photo-1200w.jpg 1200w" -
sizes必须匹配移动端布局：例如"(max-width: 768px) 100vw, 50vw"，而不是笼统写"100vw" - 别混用
w和x描述符：同一srcset里同时出现400w和2x，整条属性会被浏览器忽略
picture 元素不是可选，是构图/格式刚需时的唯一解
当手机需要裁切人脸、桌面要展示全景，或者你想用 WebP 但必须降级到 JPEG，<picture> 就不是锦上添花，而是绕不开的路径。它的规则比 srcset 更硬：
立即学习“前端免费学习笔记（深入）”；
-
<source>必须写在<img>之前，顺序错就完全失效 -
media断点要和真实 CSS 布局一致：比如栅格用768px分界，<source media="(max-width: 768px)">就不能写成767px - 用
type="image/webp"时，<img src="fallback.jpg">不是可选，是强制兜底，否则旧浏览器空白
object-position 控制焦点，不是靠猜
在小屏上，object-fit: cover 只保证不拉伸，但关键内容（比如人脸）是否被裁掉，全看 object-position。默认 center center 在竖屏下大概率切掉额头。
- 先确认容器有明确宽高（比如
height: 300px），否则object-position不生效 - 用百分比定位更可控：
object-position: 50% 20%表示横轴居中、纵轴从顶部起 20% 处为焦点中心 - 配合媒体查询动态调整：
@media (max-width: 768px) { img { object-position: 50% 15%; } }
最常被跳过的其实是 sizes 字符串的语义精度——它不是 CSS，不支持 calc()，也不接受空格冗余；而 <picture> 中 <source> 的执行顺序是自上而下匹配，第一条命中就停，顺序错了就永远用不上高清图。
