Picture标签本身不处理DPR，但通过img的srcset配合x描述符可精准适配不同设备像素比；x值直接映射DPR（如1x对应DPR=1），浏览器自动选择最匹配版本，picture仅作可扩展容器。
Picture 标签本身不直接处理 DPR（设备像素比），但配合 srcset 和 x 描述符，能精准为不同 DPR 设备提供高分辨率图片。核心是用 img 的 srcset 属性声明多张物理像素密度版本，浏览器根据当前设备 DPR 自动选择最匹配的一张。
理解 x 描述符：DPR 的直接映射
srcset 中的 x 描述符表示该图片适用于多少倍的设备像素比。例如：
-
photo@1x.jpg 1x→ 适配 DPR = 1（普通屏） -
photo@2x.jpg 2x→ 适配 DPR = 2（如多数 Retina Mac、安卓中高端机） -
photo@3x.jpg 3x→ 适配 DPR = 3（如 iPhone 14 Pro、Pixel 系列）
浏览器会忽略 picture 内的 source 元素（除非带 media 或 type），所以仅靠 x 切换时，picture 是可选容器，真正起作用的是内部 img 的 srcset。
正确写法：用 picture 包裹 img + srcset + x
虽然 img 单独支持 srcset，但用 picture 更规范、可扩展（比如后续加响应式宽度或格式切换）：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
<picture>
<source media="(min-width: 768px)" srcset="hero-large@1x.jpg 1x, hero-large@2x.jpg 2x, hero-large@3x.jpg 3x">
<source media="(max-width: 767px)" srcset="hero-small@1x.jpg 1x, hero-small@2x.jpg 2x">
<img src="hero-small@1x.jpg"
srcset="hero-small@1x.jpg 1x, hero-small@2x.jpg 2x, hero-small@3x.jpg 3x"
alt="响应式头图">
</picture>
注意：source 也支持 srcset + x，适合不同视口+不同 DPR 组合场景；img 的 src 是降级兜底（DPR 不支持时用），必须存在。
关键细节与避坑点
-
不要混用
w和x：同一srcset中不能同时出现100w和2x，它们属于不同维度（宽度 vs 像素密度） - DPR 检测由浏览器自动完成：无需 JavaScript；用户缩放页面、系统设置“显示缩放”（如 Windows 125%）也会影响实际 DPR，浏览器会动态响应
- 图片尺寸需按比例准备：若基础图是 400×300，那么 @2x 应为 800×600，@3x 为 1200×900——否则高 DPR 下仍会模糊
-
搭配
width和height属性：在 HTML 中显式声明 CSS 尺寸（如width="400" height="300"），避免布局偏移（CLS）
验证是否生效
在 Chrome DevTools 中打开 Network 面板，刷新页面后查看图片请求的文件名；再在 Device Toolbar 中切换不同设备（如 iPhone 12、Pixel 5），观察加载的是 @1x、@2x 还是 @3x 版本。也可用 window.devicePixelRatio 查看当前 DPR 值辅助判断。
