删除sizes属性后，浏览器才按1x/2x匹配设备像素比；否则强制启用宽度匹配模式，忽略x单位。
srcset里写1x/2x为什么没触发Retina加载
浏览器只在 img 标签没设 sizes 属性时，才按 1x/2x 匹配设备像素比（DPR）；一旦加了 sizes，它就切换成宽度匹配模式，完全忽略 x 单位——哪怕你写了 srcset="a.jpg 1x, b@2x.jpg 2x"，也会静默失效。
常见错误现象：
- Network 面板看到始终加载
1x图，Sec-CH-DPR请求头缺失 - 用 Safari DevTools 的 “Rendering” 面板查到
devicePixelRatio是 2，但图片仍是模糊的 -
img有sizes="(max-width: 768px) 100vw"，却指望2x生效
正确做法：
- 删掉
sizes属性（除非你真要按布局宽度切图） -
srcset必须完整写清倍率，且最高倍率放最后：srcset="photo.jpg 1x, photo@2x.jpg 2x, photo@3x.jpg 3x" -
img的src必须存在，且指向可用 fallback 图（不能是占位符或 404）
为什么写了2x却还是加载1x图
不是浏览器不认，而是它根本没进入 DPR 匹配逻辑——关键条件被破坏了。
容易踩的坑：
-
img缺src：页面留白，Network 显示 pending 或 no request -
srcset混用单位：srcset="a.jpg 1x, b.jpg 400w"→ 整个srcset被忽略，回退到src - 高 DPR 设备（如 iPhone 15 Pro）加载了
3x图，但你只提供了1x和2x→ 浏览器选最接近的2x，不会“降级”到1x，但若2x文件不存在，就 fallback 到src
验证方式：
- Chrome DevTools → Network → 点开图片请求 → 查看
Request Headers中是否有Sec-CH-DPR: 2 - 用 iOS 设备真机访问，别只信模拟器（Safari 模拟器 DPR 常固定为 1）
picture标签里用2x描述符却始终 fallback 到 img src
picture 不自动接管 2x 逻辑，它只管 source 的 media 或 type 匹配；匹配失败就直接走 img 的 src，不会尝试解析 img 的 srcset。
典型失效场景：
-
source的media写成media="max-width: 768px"（缺括号）→ 浏览器忽略该source，不报错 -
source有media但没写srcset→ 该source无效，等于没写 -
img没写src，只写了srcset→ 页面空白，因为picture的 fallback 只认src，不认srcset
正确结构示例：
<picture><source media="(min-width: 769px)" srcset="hero-desktop@2x.jpg 2x, hero-desktop@3x.jpg 3x"><source media="(max-width: 768px)" srcset="hero-mobile@2x.jpg 2x, hero-mobile@3x.jpg 3x"> @@##@@ </source></source></picture>
注意：img 的 srcset 在这里只是兜底，只有所有 source 都不匹配时才生效。
用x描述符适配视网膜屏的适用边界
1x/2x 只适合“图片占满容器宽度”的简单场景，比如 icon、banner、头像这类尺寸固定的元素。一旦图片宽度由 CSS 动态控制（如 width: 33%、flex: 1），x 就不可靠——浏览器无法知道渲染宽度，只能保守 fallback 到 src 或最低倍率图。
更稳妥的选择：
- 改用
w单位 +sizes：比如srcset="a-400w.jpg 400w, a-800w.jpg 800w"配sizes="(max-width: 480px) 90vw, 400px" - 如果既要切宽度又要切倍率，必须用
picture套多层source，每层内再写srcset="... 1x, ... 2x"
真正容易被忽略的一点：现代项目中，sizes 值必须和实际 CSS 布局完全一致。哪怕你写了 sizes="50vw"，而真实渲染宽度是 320px（因父容器 padding 或 margin 挤压），浏览器仍会按 50vw 计算 → 加载远大于需要的图。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
