结论：标签不会自动适配分辨率，必须配合至少一个（含合法media或srcset+sizes）且末尾必须存在并带src和alt，否则浏览器静默回退至兜底图；所有未匹配即失效，常见原因包括media语法错误、type与响应头不一致、漏写或其src。
直接说结论：只写 media 或 srcset + sizes，且 src，否则浏览器静默回退到那张图——你以为切了，其实全在用 fallback。
为什么写了 却始终只加载 ![]()
的图
这是最常被忽略的“失效”现象。根本原因不是浏览器不支持，而是所有
-
media值写错：比如写成media="max-width: 768px"（缺括号）或media="768px"，浏览器直接忽略该 -
srcset单独出现但没配media或type：此时该 - 服务器返回的
Content-Type和type="image/webp"不一致：比如路径是.webp，但服务端返回text/plain，Chrome 会标记为(blocked:mime-type) - 漏掉
src：页面图片区域留空，不是报错，是静默失败
media 属性怎么写才真正按屏幕宽度生效
media 是断点适配的核心，但它只认标准 CSS 媒体查询语法，且匹配顺序严格从上到下。
- ✅ 正确写法：
media="(max-width: 480px)"、media="(min-width: 769px) and (max-width: 1200px)"、media="(min-width: 1201px)" - ❌ 错误写法：
media="screen and (max-width: 480px)"（冗余）、media="small"（非法值）、media="480px"（非查询语句） - 多个
media条件重叠时，浏览器取第一个满足的，后面的直接跳过——所以要把更具体的规则（如(min-width: 1440px)）放在前面，宽泛的（如(max-width: 768px)）放最后 - 不要指望
media="(prefers-color-scheme: dark)"单独触发图片切换：它能用，但需配合其他条件（如尺寸）才有实际效果，纯靠它切图目前无浏览器实现
srcset + sizes 怎么配合实现 1x/2x/3x 分辨率适配
当不需要换构图、只希望 Retina 屏自动加载双倍图时，srcset + sizes 比 media 更轻量可靠。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
srcset中用x描述符：例如photo.jpg 1x, photo@2x.jpg 2x, photo@3x.jpg 3x，浏览器根据window.devicePixelRatio自动选 -
sizes必须存在且合法：例如sizes="(max-width: 600px) 100vw, 50vw"，告诉浏览器“这张图在小屏占满视口，在大屏占一半”，否则srcset中的w描述符会失效 - 顺序很重要：把
3x图放在最后，因为浏览器从左到右匹配，遇到第一个满足 DPR 的就停；如果1x写在最后，2x设备也可能加载1x -
srcset和sizes：它是 fallback，但同样需要适配 DPR，别让它成为性能短板
type 属性为什么不能省，以及怎么避免格式降级失效
type 是现代图片格式（WebP/AVIF）能否真正落地的关键，不是可选项。
-
type值必须是标准 MIME 类型：type="image/webp"✅，type="webp"❌，type="image/jpg"❌（应为image/jpeg） - 服务器响应头
Content-Type必须和type完全一致：WebP 文件返回image/webp，AVIF 返回image/avif，否则浏览器跳过该 - 顺序即优先级：所有
image/webp的image/jpeg之前，浏览器找到第一个支持的type就停 - 不要在同一个
media和type做“双重保险”：它们是正交条件，media控制是否启用该type控制是否选用它；真正健壮的写法是分层：先用media切尺寸，再在每个尺寸内用type切格式
最容易被忽略的其实是 sizes 属性——它不只是给 sizes 会直接影响 fallback 图片的 DPR 选择逻辑。不填，就等于放弃对兜底图的分辨率控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
