标签本身不读取设备 dpr，而是浏览器根据 srcset 的 x 描述符（如 1x/2x）与 sizes 属性，结合当前设备 dpr 和视口宽度智能匹配图片；需为每个 和 正确配置 srcset 与 sizes，并确保 有 src 兜底，避免回退单图加载。
关键不是 <picture></picture> 在“切换”，而是你写对了 source 和 img 里的 srcset + sizes，浏览器才真正完成智能匹配。
用 x 描述符精准匹配 DPR
x 描述符告诉浏览器：这张图是为多少倍屏设计的。
设备 DPR 为 2 时，浏览器会优先选标有 2x 的资源（前提是它被激活且尺寸合适）。
- 每个
<source></source>或<img>的srcset可列出多个带x的路径 - 必须配
src作为1x兜底（老浏览器或 DPR=1 时使用） - 不要混用
x和w描述符在同一srcset里
示例：
<picture><source media="(max-width: 480px)" srcset="icon-1x-sm.png 1x, icon-2x-sm.png 2x, icon-3x-sm.png 3x"><source media="(min-width: 481px)" srcset="icon-1x-lg.png 1x, icon-2x-lg.png 2x, icon-3x-lg.png 3x"> @@##@@ </source></source></picture>
配合 media 实现“断点 + DPR”双重控制
先按屏幕宽度选 <source></source>，再在该 <source></source> 的 srcset 里按 DPR 选图。
顺序很重要：浏览器从上到下匹配第一个满足 media 的 <source></source>，其余跳过。
- 小屏
<source></source>提供小尺寸但高 DPR 版本（如icon-2x-sm.png） - 大屏
<source></source>提供大尺寸且适配高 DPR 的版本（如icon-2x-lg.png） - 最后的
<img src="icon-1x-lg.png" srcset="icon-1x-lg.png 1x, icon-2x-lg.png 2x" alt="应用图标">是必填兜底，也要带srcset和src
常见错误：漏掉 src，或 <source></source> 没写 srcset，会导致整个 <picture></picture> 回退到 <img> 单图加载。
sizes 属性不能少，尤其当用 w 描述符时
如果你改用 w 描述符（比如 photo-400w.jpg 400w），就必须写 sizes，否则浏览器无法知道“这张图在页面中实际占多宽”，也就没法算出该加载哪个 w 版本。
sizes 告诉浏览器：“在不同视口下，这张图大概显示多宽”，例如：
-
sizes="(max-width: 768px) 100vw, 50vw"表示：小屏占满视口，大屏占一半 - 浏览器用这个宽度 × 当前 DPR，去匹配
srcset中最接近的w值
⚠️ 注意：sizes 必须写在 <img src> 上，<source></source> 上写的 sizes 会被忽略。
表格等受限布局中要特别注意宽度感知
表格单元格常有固定宽度或 max-width，但浏览器不会自动感知。若 sizes 还写 "100vw"，就可能加载远超需要的大图。
正确做法：
- 查看该
<td> 的实际渲染宽度（比如 CSS 设了 <code>max-width: 120px） - 把
sizes写成匹配值，例如：sizes="(max-width: 767px) 120px, (max-width: 1023px) 200px, 300px" -
<source></source>的srcset用w描述符（如"thumb-120w.jpg 120w, thumb-240w.jpg 240w"）更稳妥
这样浏览器才能在 DPR=2 的手机上，精准选 thumb-240w.jpg 而非 thumb-1200w.jpg。
不复杂但容易忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
