picture标签不识别物理分辨率，仅依赖media（视口断点）、srcset（DPR适配）和sizes（显示宽度基准）协同决策；三者任一缺失或错误即回退至img src单图加载。
picture 标签不识别“分辨率”，只靠 media + srcset + sizes 协同决策
浏览器根本不会读取设备的物理分辨率（比如 3840×2160），它真正看的是视口宽度（vw）、设备像素比（devicePixelRatio）和你写的 media、srcset、sizes 是否匹配。写错任意一项——比如 media="(max-width: 768px" 少个右括号，或漏掉 sizes，整个 <picture> 就会直接回退到 <img src> 单图加载。
-
media控制“在多宽的屏幕上用哪组图”，必须是合法 CSS 媒体查询（带括号、语法完整） -
srcset里的1x/2x是给 DPR 用的，不是给“屏幕总像素”用的；400w/800w是给视口尺寸估算用的 -
sizes必须写在<img>上，<source>上写的会被忽略 - 所有
<source>按顺序匹配，第一个media为真就停，后面的全跳过
大图适配要分两层：先按视口断点选构图，再按 DPR 选密度
企业官网首页大图不能只堆高像素，得先解决“构图适配”：手机竖屏看特写，桌面横屏看全景。这靠 <source> 的 media 实现；同一断点下再用 srcset 提供 1x/2x 版本，让 DPR=2 的 iPhone 或 Mac 自动选高清版。
- 小屏（≤768px）：
<source media="(max-width: 768px)" srcset="hero-mobile@1x.jpg 1x, hero-mobile@2x.jpg 2x">→ 裁剪竖构图 + 高密度适配 - 大屏（≥769px）：
<source media="(min-width: 769px)" srcset="hero-desktop@1x.jpg 1x, hero-desktop@2x.jpg 2x">→ 全景宽图 + 同样支持 2x - 末尾
<img>的src必须存在，且建议也带srcset，否则 DPR=1 设备可能加载错图
容易被忽略的三个硬性要求
很多页面看着能切图，但 Network 面板里始终只请求一张，问题往往出在这三处：
-
<img>缺src：哪怕写了srcset，没有src就算老浏览器或 JS 禁用也会空白 -
<source>有media却没写srcset：该<source>直接失效，浏览器跳到下一个 - 混用
w和x描述符：比如srcset="a.jpg 400w, b.jpg 2x"—— 浏览器无法解析，整条srcset作废
验证是否真加载了高分图，别信 Network 面板文件名
CDN 重写、Service Worker 缓存、304 响应都可能导致面板显示的文件名和实际内容不符。真正确认方式只有两个：
立即学习“前端免费学习笔记（深入）”；
- 在 Network 面板过滤
img，右键请求 → “Open in new tab”，看图片实际像素尺寸和Content-Length - 控制台执行
window.devicePixelRatio，再对照当前激活的<source>的media条件是否匹配（比如devicePixelRatio === 2时，media="(min-resolution: 2dppx)"才生效）
最常被绕过的细节是：你以为写了 2x 就万事大吉，其实如果 sizes 算出来的目标宽度太小，浏览器宁可加载 1x 大图也不愿下载 2x 小图——因为解码开销和内存占用更关键。所以 sizes 不是可选项，它是分辨率适配的计算基准。
