HTML5原生图片响应方案分两种：+按媒体查询切换不同构图/尺寸图，需兜底；的srcset+sizes按视口宽度选合适分辨率图，需sizes匹配CSS容器宽度。

标签是 HTML5 中实现“按屏幕自动切换图片”的原生方案，它不靠 JavaScript，而是由浏览器根据当前视口宽度、设备像素比等条件，自动选择最合适的图片资源。

---

用 + 按宽度切换不同构图或尺寸的图

适合场景：移动端用竖版裁剪图，桌面端用横版大图；或不同分辨率下加载不同尺寸文件。

• 每个 标签写一条媒体查询（media），配合 srcset 指定对应图片路径
• 浏览器从上到下匹配，第一个满足条件的 就生效
• 必须在最后放一个 作为兜底，否则无图可显示

示例：

<picture><source srcset="hero-desktop.jpg" media="(min-width: 1024px)"><source srcset="hero-tablet.jpg" media="(min-width: 768px)">
  @@##@@
</source></source></picture>

注意：media 值必须是完整媒体查询，比如 (max-width: 767px)，不能只写 767px。

---

用 的 srcset + sizes 按视口宽度选合适分辨率图

适合场景：同一张图，只换尺寸（如 400w / 800w / 1200w），保持构图一致，节省带宽。

• srcset 列出多个图源及它们的自然宽度（单位 w）
• sizes 告诉浏览器：“这张图在不同断点下占容器多宽”，例如 (max-width: 768px) 100vw, 50vw
• 浏览器结合两者，选出不小于容器预期宽度的最小可用图

示例：

@@##@@

关键点：sizes 必须与实际 CSS 容器宽度逻辑一致，否则选图会偏大或模糊。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

---

配合 CSS 实现基础缩放与防失真

光有 HTML 资源切换还不够，图片样式也得跟上：

• 给 加 max-width: 100% 和 height: auto，确保它能随容器缩放且不拉伸
• 父容器要有明确宽度（如 width: 100% 或 max-width: 800px）
• 如果父容器是 Flex 项，记得加 min-width: 0，防止 flex 默认的 min-width: auto 锁死收缩

错误写法：

img { width: 100%; height: 100%; } /* 强制拉伸，必变形 */

正确写法：

img { max-width: 100%; height: auto; }

---

补充：高 DPR 设备（如 Retina 屏）怎么适配

• 用 x 单位表示设备像素比：logo@2x.png 2x, logo@3x.png 3x
• x 和 w 不可混用在同一 srcset 中
• 若同时需适配宽度和 DPR，优先用 w + sizes（更精准），x 更适合固定尺寸组件（如图标）

示例（适配 2x 屏）：

@@##@@

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