视网膜屏下必须用w单位配sizes，因为浏览器仅在无sizes且全用x单位时才按dpr匹配2x图；现代css布局中图片宽度由样式控制，sizes提供真实渲染宽度，w单位才能结合dpr精准选图，混用x与sizes会导致整个srcset被忽略。
为什么视网膜屏下 sizes 必须配 w 单位，不能只靠 2x
单纯写 srcset="logo@2x.jpg 2x" 在 Retina 屏上看似能生效，但只要图片宽度由 CSS 控制（比如 max-width: 100% 或 flex 布局），浏览器就**完全忽略 2x 描述符**——它只在图片占满视口且没写 sizes 时才按 DPR 匹配。现代布局中，sizes 是唯一能让浏览器知道“这张图实际渲染多宽”的依据，而匹配逻辑只认 w 单位。
常见错误：混用 logo@1x.jpg 1x, logo@2x.jpg 2x 和 sizes="(max-width:768px) 100vw" → 整个 srcset 被浏览器静默丢弃，回退到 src。
- 必须统一用
w单位：srcset="logo-400w.jpg 400w, logo-800w.jpg 800w, logo-1200w.jpg 1200w" -
sizes值要真实反映 CSS 布局下的渲染宽度，例如：sizes="(max-width: 480px) 90vw, (max-width: 768px) 45vw, 300px" - Retina 屏用户最终加载哪张图，取决于
sizes计算出的渲染宽度 ×devicePixelRatio，再向srcset中最接近的w值靠拢
sizes 里的媒体查询怎么写才和 CSS 布局真正对齐
很多人把设计稿断点直接抄进 sizes，结果 iPhone SE 加载了 1200w 图——因为实际 CSS 把图片设为 width: 300px，但 sizes 还写着 "(max-width:768px) 100vw"，浏览器按 375px × 100vw = 375px 渲染宽度去匹配，却只提供了 400w 和 800w 选项，只能选 400w（勉强够用）或跳过直接加载 src。
- 先确认图片在各断点下的真实 CSS 宽度：用 DevTools 的 Elements 面板 hover 图片，看 computed width
- 对应写
sizes：如果 CSS 是@media (max-width: 480px) { width: 100%; }，那sizes就该是"(max-width: 480px) 100vw"，不是"(max-width: 479px)"或"(max-width: 481px)" - 避免漏掉兜底值：老 Safari（13.1 之前）要求显式兜底，推荐写法：
sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"（现代浏览器已支持无兜底，但 iOS 13.3 以下仍需） - 单位不能省：
sizes="50vw"合法，sizes="50"无效，浏览器直接忽略整个属性
如何验证 Retina 屏是否真加载了高倍图
别信“看起来清晰”，也别依赖模拟器缩放。真正判断依据只有一个：Network 面板里实际发起的请求。
- 打开 DevTools → Network → 过滤
img，勾选Disable cache - 用真机调试或 Chrome 的 Device Toolbar 切换到
iPhone 12（DPR=3）或iPad Pro（DPR=2） - 刷新页面，观察加载的是
hero-400w.jpg还是hero-1200w.jpg；右键请求 →Copy response headers，比对Content-Length确认没被缓存干扰 - 如果始终加载
src指向的图，检查控制台是否有Failed to parse 'srcset' value错误，或sizes里有没有空格、单位缺失、括号不匹配
src 属性不是摆设，而是 Retina 降级的关键防线
src 是所有不支持 srcset 的旧环境（IE、Android 4.x WebView、部分邮件客户端）唯一能加载的图。把它设成最大图，首屏卡顿；设成最小图，Retina 用户看到模糊图。
- 推荐策略：
src指向一个体积适中、清晰度够用的中间档，比如 768w 或 800w 版本 - 不要让
src和srcset中的某张图重复，否则可能触发重复请求（Chrome 会去重，但 Safari 旧版不会） - 如果用了
<picture></picture>，<img>的src仍是 fallback，必须存在且可访问
最常被忽略的点：sizes 不是“建议”，而是浏览器选择图片的唯一计算依据；它和 CSS 布局脱节一像素，加载就错一张图。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
