picture 标签通过 的 media、srcset、sizes 和 type 属性，实现按视口宽度、设备像素比和格式支持的多维响应式图片适配，未匹配时回退至 。

Picture 标签本身不直接识别“屏幕分辨率”，而是根据视口宽度（viewport width）、设备像素比（dpr）、图片格式支持等条件，由浏览器自主选择最合适的图片资源。关键在于用 <source></source> 提供多种候选，并通过 media、sizes 和 srcset 精准描述适用场景。

用 media 属性匹配视口宽度（最常用）

通过 media 属性指定 CSS 媒体查询条件，让不同宽度的屏幕加载对应尺寸的图片：

• media="(max-width: 480px)" → 小屏（如手机），加载窄图
• media="(min-width: 768px) and (max-width: 1023px)" → 平板，加载中等宽图
• media="(min-width: 1024px)" → 桌面，加载宽图或高清图

注意：<source></source> 按顺序匹配，第一个满足条件的生效；未匹配到时，回退到末尾的 <img>。

用 srcset + sizes 实现响应式密度切换（适配高 DPR 屏幕）

当同一视口下需为 Retina 屏提供 2x 图，普通屏用 1x 图，应结合 srcset（提供多密度源）和 sizes（告知浏览器图片在页面中的显示宽度）：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• srcset="photo-400w.jpg 1x, photo-800w.jpg 2x"：告诉浏览器 1x 设备用 400w，2x 设备用 800w
• sizes="(max-width: 600px) 100vw, 50vw"：表示小屏占满视口宽，大屏占视口一半 —— 这帮助浏览器预估所需像素宽度，再结合 DPR 决定最终加载哪张

例如：在 400px 宽的 2x 屏上，浏览器计算需约 800px 宽的图，于是选 photo-800w.jpg。

优先使用 type 属性支持现代图片格式（如 WebP/AVIF）

用 type 声明图片 MIME 类型，浏览器会跳过不支持的格式，提升加载效率：

• <source srcset="photo.avif" type="image/avif"></source>
• <source srcset="photo.webp" type="image/webp"></source>
• <img src="photo.jpg" alt="描述"> → 作为所有不支持新格式浏览器的兜底

现代浏览器按 <source></source> 顺序检查 type，首个支持的即被采用，无需 JS 判断。

完整示例：兼顾宽度、密度与格式

以下代码实现三重适配：小屏用 WebP 小图，桌面用 AVIF 大图，Retina 屏自动加载双倍分辨率版本，不支持新格式则降级为 JPG：

         srcset="photo-small.webp 1x, photo-small@2x.webp 2x"
      type="image/webp">
         srcset="photo-small.jpg 1x, photo-small@2x.jpg 2x">
         srcset="photo-large.avif 1x, photo-large@2x.avif 2x"
      type="image/avif">
         srcset="photo-large.webp 1x, photo-large@2x.webp 2x"
      type="image/webp">
         srcset="photo-large.jpg 1x, photo-large@2x.jpg 2x"
      alt="风景照"
      sizes="(max-width: 480px) 100vw, 50vw">

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！