viewport必须置于<head>最顶部且唯一，否则响应式图片失效；srcset需配sizes，其值须匹配真实布局宽度；picture的source顺序与media断点必须严格守序，且需提供JPEG降级。
移动优先做响应式图片，不是先写桌面样式再加媒体查询，而是从第一行 HTML 就按小屏逻辑组织资源选择——viewport 必须在 <head> 顶部、<picture> 的 <source> 断点必须匹配移动端真实布局宽度、sizes 值不能硬写 100vw 就完事。
viewport 标签写错，后续所有图片适配都失效
很多页面明明写了 img { max-width: 100%; height: auto; }，手机上还是横向滚动、图片撑破、文字糊成一片，根本原因就是 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 没生效。
常见问题包括：
- 标签被动态插入（比如 Vue/React SSR 渲染漏掉），浏览器已按默认 980px 解析完 DOM
- 写在
<body>里，或重复写了两次 - 加了
user-scalable=no或maximum-scale=1.0，锁死双击放大，读屏用户也无法操作 - content 写成
width=375这类固定值，失去设备自适应能力
验证方式：Chrome DevTools 切手机模式 → 右键“查看网页源代码”，确认这行在 <head> 开头附近。
立即学习“前端免费学习笔记（深入）”；
srcset + sizes 不配对，等于白写
srcset 只是“有哪些图”，sizes 才告诉浏览器“这张图在当前布局下实际占多宽”。不配对，浏览器就按默认 100vw 计算，导致小屏也下载大图。
关键规则：
-
sizes是字符串，不是 CSS，不支持calc()或 CSS 变量 - 必须和真实断点一致：如果 CSS 用
@media (max-width: 768px)控制布局，sizes就得写(max-width: 768px) 100vw，别写成767px - 如果图片在 Flex 容器中占 1/3 宽，且断点从 768px 开始，
sizes应为(max-width: 768px) 100vw, 33.33vw，不是全写100vw -
srcset中混用w和x描述符（比如480w, 2x），整条属性会被浏览器忽略
示例（移动端优先）：
<img
src="hero-480.jpg"
srcset="hero-480.jpg 480w,
hero-768.jpg 768w,
hero-1200.jpg 1200w"
sizes="(max-width: 768px) 100vw, 50vw"
alt="主视觉"
/>
<picture> 的 <source> 顺序和 media 断点必须严格守序
<picture> 不是锦上添花，是当构图、格式、DPR 都需要差异化时的唯一解。但它极容易因顺序或断点错位而完全失效。
必须遵守：
- 所有
<source>必须在<img>标签之前，否则被忽略 -
<source media="(max-width: 768px)">的断点，必须和真实 CSS 布局断点完全一致（比如你用768px切换栅格列数，这里就不能写767px） - WebP/AVIF 必须配降级
<img src="xxx.jpg">，否则旧浏览器直接不显示 - 旧版 Edge 解析
sizes时，media属性里有空格（如(max-width: 768px)）会导致整条失效，建议写成(max-width:768px)
典型结构（移动裁切 + 桌面全景 + WebP 降级）：
<picture> <source media="(max-width: 768px)" srcset="hero-mobile.webp" type="image/webp"> <source media="(max-width: 768px)" srcset="hero-mobile.jpg" type="image/jpeg"> <source media="(min-width: 769px)" srcset="hero-desktop@1x.webp, hero-desktop@2x.webp 2x" type="image/webp"> <source media="(min-width: 769px)" srcset="hero-desktop@1x.jpg, hero-desktop@2x.jpg 2x" type="image/jpeg"> <img src="hero-desktop@1x.jpg" alt="主视觉插图" sizes="(max-width: 768px) 100vw, 50vw"> </picture>
Flex/Grid 容器里图片缩不进去？min-width: 0 是隐藏开关
即使写了 max-width: 100%，在 Flex 或 Grid 容器中，图片仍可能撑开父容器、拒绝缩小——这是浏览器默认给 <img> 设了 min-width: auto。
解决方法很简单，但极易被忽略：
- 给图片加
min-width: 0（或min-width: 0px） - 若图片是子元素，也可在父容器上设
min-width: 0，强制触发 flex item 的收缩行为 - 搭配
object-fit: cover时，父容器必须有明确宽高，否则object-fit不生效
示例：
.card-img {
width: 100%;
height: 200px;
object-fit: cover;
min-width: 0;
}
真正卡住项目的，往往不是语法不会写，而是 viewport 漏了、sizes 写死、<source> 顺序颠倒、或者 Flex 容器里忘了 min-width: 0 ——这些点不验真机、不查 Network 面板，光看页面渲染根本发现不了。
