必须用srcset+sizes或才能省带宽保清晰；仅max-width:100%和height:auto不解决下载大图问题，浏览器仍加载2000px原图再缩放，造成流量浪费与延迟。
只写 max-width: 100% 和 height: auto 是基础，但根本没解决带宽浪费问题；真正在移动端省流量、保清晰，必须用 srcset + sizes 或 <picture></picture>，且 sizes 写错就等于白配。
为什么 max-width: 100% 单独用在手机上很危险
它只让图片“看起来不撑破”，但浏览器照常下载 2000px 宽的原图，再缩到 375px 显示——像素全下了，4G 下等三秒，实际只用到 30KB 有效信息。更糟的是：
- 父容器用了
flex但没设min-width: 0，图片死活缩不进去 - 漏了
height: auto，图片被压扁或拉长 -
width: 100%替代max-width: 100%，小图会被强行拉伸模糊 -
viewport标签没写对（比如漏了initial-scale=1.0或写在里），整个响应式前提就崩了
srcset + sizes 怎么写才不被浏览器跳过
现代浏览器看到 srcset 但没配 sizes，会直接忽略整组，退化为只加载 src。关键点：
-
srcset里必须统一用w描述符（如"small.jpg 480w, medium.jpg 768w"）或统一用x（如"low.jpg 1x, high.jpg 2x"），混用（比如480w和2x同时出现）会导致整个属性失效 -
sizes是字符串，不是 CSS，不支持calc()，但支持媒体查询语法：sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw" - 如果图片在栅格中占 1/3 宽，且断点从 768px 开始，
sizes应该是"(max-width: 768px) 100vw, 33.33vw"，不是硬写"100vw" - 旧版 Edge（EdgeHTML）解析
sizes时，媒体查询里有空格（如(max-width: 768px)）会整条失效；Safari 12.1 之前对w描述符支持不全
什么情况下非用 <picture></picture> 不可
当 srcset 搞不定时，<picture></picture> 是唯一解：
- 需要不同构图：手机裁人脸、桌面展全景，
<source media="(max-width: 480px)" srcset="face-crop.jpg"></source>必须放最前面 - 强制用 WebP/AVIF 并降级：
<source type="image/webp" srcset="img.webp"></source>后必须跟<img src="img.jpg" alt="">，且type拼错（比如多写分号）整条就被跳过 -
<source></source>的media断点要和真实 CSS 布局断点一致，比如布局用768px，就别写成767px -
<picture></picture>必须包裹<img>，顺序反了（比如<img>在前）就完全不生效
容易被忽略的兼容性细节
这些不是“写了就跑通”的事：
-
object-fit在父容器没设明确宽高时根本不生效 - Flex 容器里图片缩不进去？加
min-width: 0是隐藏开关 - 背景图响应式：容器必须有明确高度（比如
min-height: 100vh），否则不显示；background-attachment: fixed在 iOS 上大概率卡顿，建议用@media (pointer: coarse)关掉 - 所有
<source></source>的srcset若含2x，必须对应标注，否则 Retina 屏仍加载低清图
真正麻烦的从来不是语法，而是 sizes 值是否贴合真实布局、media 断点是否和 CSS 对齐、以及旧浏览器对空格和描述符的容忍度——这些地方一错，整套响应式图片逻辑就静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
