srcset本身不降级，只负责选图；真正决定fallback的是sizes、src和浏览器能力配合。漏写src或写错sizes（如"100vw"），即使srcset列全也会总加载1200w图，因浏览器按视口宽而非实际渲染宽匹配。

srcset 本身不降级，它只做“选图”，真正决定 fallback 行为的是 sizes、src 和浏览器能力三者配合。写错 sizes 或漏掉 src，再全的 srcset 也白搭。

为什么 srcset 列了 400w/800w/1200w 却总加载 1200w

浏览器不是按设备分辨率“猜”该用哪张，而是先算出图片在页面中实际占多宽（靠 sizes），再从 srcset 里挑最接近的宽度档位。如果 sizes 没写或写成 "100vw"，它就默认按整个视口宽去选——哪怕你手机只有 375px 宽，也会倾向加载 1200w 图。

• sizes 必须匹配 CSS 布局：比如图片容器在小屏下是满宽、桌面端是 50vw，就得写 sizes="(max-width: 768px) 100vw, 50vw"
• 别混用 w 和 x：同一组 srcset 只能用一种描述符；320w 对应视口宽度适配，2x 对应像素密度适配，混写会让 Chrome 直接跳过整条 srcset
• 每个 srcset 项后的宽度值（如 400w）必须和原图真实像素宽一致，不能写估算值；否则计算偏差会连锁导致选图错误

srcset + img[src] 的 fallback 链路怎么才算完整

img 标签的 src 属性不是可选项，它是所有不支持 srcset 的旧环境（IE11、部分安卓 WebView）唯一能识别的入口。一旦这个 src 指向 404、相对路径错误或 CDN 未部署的资源，降级链就断了——用户看到的不是“低清图”，而是空框或 alt 文字撑开布局。

• src 必须指向一个静态、高可用资源：推荐用 CDN 托管的 800w 主图，或内联 base64 的 1px GIF（src="data:image/gif;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs="）
• 不要把 src 写成动态地址，例如 logo.jpg?format=webp —— 后端挂了、CDN 缓存策略冲突、代理截断参数都会让它失效
• 如果用了 loading="lazy"，更要确保 src 可访问；否则断网或 JS 加载失败时，连这张图都出不来

DevTools 里怎么快速验证 srcset 是否真生效

光看页面显示正常没用。关键要确认“浏览器到底发了哪个请求”，以及“换设备尺寸后是否切换了 URL”。手动点 Network 面板太慢，得用可复现的方式盯住源头。

DeepBI DHTML 页面生成器

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

下载

• 打开 DevTools → Network → 勾选 Disable cache 和 Large rows，方便看清每张图的请求 URL 和响应大小
• 用设备模拟器切 DPR：iPhone 12（3x）、Mac Retina（2x）、普通笔记本（1x），观察加载的图名是否随 DPR 变化；不变说明 srcset 或 sizes 没起作用
• 右键加载出的图片 → Copy → Copy response，粘贴进编辑器看实际返回尺寸；如果返回的是 1200px 宽的图，但页面容器只有 300px，就是 sizes 描述失准

常见静默失败：WebP/JPEG 尺寸不一致导致布局跳动

不同格式图的原始像素尺寸（intrinsic size）必须完全一致。浏览器加载 WebP 时按它的 EXIF 宽高算容器，切到 JPEG 时如果元数据缺失或数值不同，就会重排布局——这不是 CSS 问题，是资源本身不统一。

• 用命令行验证：file logo.webp 和 file logo.jpg，输出里都要明确写着相同宽高，比如 800 x 450
• 修复 JPEG 元数据：exiftool -ImageWidth=800 -ImageHeight=450 logo.jpg
• 生成时强制统一分辨率：convert -resize 800x450\! input.png output.jpg（末尾 \! 表示忽略比例强行拉伸并写死尺寸）
• 终极兜底：放弃依赖图片自身尺寸，给容器加 style="aspect-ratio: 16/9" 或显式 width/height 属性

最容易被忽略的一点：所有降级手段都建立在「src 始终可加载」这个前提上。它不是“备用路径”，而是整个链路的锚点；一旦失效，srcset、sizes、甚至后续的 JS error 处理，全都失去意义。

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