标签本身不提供高分屏适配，仅作为容器；真正起效的是 的 media、srcset 和 sizes 组合，浏览器依据 dpr 与视口宽度自主选图，任一配置错误（如括号缺失、sizes 遗漏、type 与响应头不一致）均导致回退至 。
<picture></picture> 本身不“配”高分屏，它只是容器；真正起作用的是 <source></source> 的 media、srcset 和 sizes 组合，浏览器根据设备像素比（DPR）和视口宽度自主选图。写错一个括号、漏掉 sizes、或 type 声明与服务器响应头不一致，就会全部回退到 <img src>。
用 min-resolution 匹配高 DPR 屏幕
这是最直接的写法，但兼容性有限（Safari 14.1+、Chrome 21+、Firefox 3.5+ 支持，IE 不支持）。min-resolution: 2dppx 表示“设备像素比 ≥ 2”，即 Retina、2K 屏等。
-
<source media="(min-resolution: 2dppx)" srcset="photo@2x.jpg"></source>：只在高 DPR 屏加载 2x 图 -
<source media="(min-resolution: 3dppx)" srcset="photo@3x.jpg"></source>：专供 iPhone 14 Pro 等 3x 屏 - 必须按 DPR 从高到低排序，否则低 DPR 屏可能误匹配高分辨率
<source></source> - 注意：
dppx是标准单位，别写成dpi或漏掉x——2dpi或2x都无效
用 srcset + sizes 实现更通用的密度适配
比 min-resolution 兼容更好，所有现代浏览器都支持，且能结合视口宽度做联合判断。关键点是：sizes 必须存在，否则带 w 描述符的 srcset 不会触发密度选择。
-
srcset="photo-400w.jpg 400w, photo-800w.jpg 800w, photo-1200w.jpg 1200w"：提供不同自然宽度的图源 -
sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"：告诉浏览器“这张图在小屏占满视口，在中屏占一半，在大屏占三分之一” - 浏览器用
sizes计算出目标显示宽度（比如 400px），再乘以当前 DPR（比如 2），得出需要约 800px 宽的图，于是选photo-800w.jpg - 别写
sizes="100%"—— 这是无效值，必须是vw、px或媒体查询表达式
混用 media 和 srcset 应对多维条件
真实场景往往既要区分屏幕尺寸，又要兼顾 DPR。比如：平板横屏（768–1023px）下，普通屏用 768w 图，2x 屏用 1536w 图 —— 这时不能只靠 min-resolution，得组合用。
<source media="(min-width: 768px) and (max-width: 1023px)" srcset="photo-768w.jpg 1x, photo-1536w.jpg 2x"></source><source media="(min-width: 1024px)" srcset="photo-1200w.jpg 1x, photo-2400w.jpg 2x"></source>-
<img src="photo-400w.jpg" alt="...">：兜底图，也用于不支持<picture></picture>的老浏览器 - 顺序很重要：
<source></source>按 DOM 顺序匹配，第一个满足media条件的生效，后面的被忽略 - 别把
srcset写成src——<source src="..."></source>只能加载单图，失去密度适配能力
容易被忽略的三个硬性前提
哪怕语法全对，缺了下面任意一条，高分屏照样加载 1x 图、发虚、甚至白屏。
-
<img>标签必须存在且有src属性 —— 它不是可选的“备用”，而是<picture></picture>的必需子元素 - 服务器要正确返回图片的
Content-Type，比如image/webp；若<source type="image/webp"></source>但响应头是text/plain，浏览器会跳过该<source></source> - CSS 中避免用
width/height强制缩放图片，应使用max-width: 100%; height: auto;保证等比渲染；否则即使加载了 2x 图，也会被 CSS 拉伸模糊
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
