srcset 本身不提供优雅降级，老浏览器只认 src，因此必须为 src 提供真实可用、格式兼容的 fallback 图；sizes 需准确反映实际占位宽度，srcset 各项单位须统一（全 w 或全 x），否则整个 srcset 被丢弃；IE 等仅加载 src，应选 JPEG/PNG；error 事件需监听并动态兜底；务必设置宽高或 aspect-ratio 防布局跳动。
srcset 本身不提供“优雅降级”能力，它只是告诉现代浏览器“我有多个图”，但老浏览器（如 IE11、Android 4.3 WebView）会直接忽略 srcset 和 sizes，只认 src。真正的降级保障来自你是否为 src 提供了一个真实可用、尺寸适中、格式兼容的 fallback 图。
srcset + sizes 配对失效的典型表现
浏览器始终加载最大图，或完全退化成单张图——不是 srcset 写错了，而是 sizes 没匹配实际渲染宽度，或 srcset 项单位混用。
-
sizes必须反映图片在页面中**真实占位宽度**，不是容器 CSS 宽度，更不是“大概 100vw”；例如卡片内嵌图被限制在max-width: 300px，那sizes="(max-width: 768px) 90vw, 300px"就可能错，应改为sizes="(max-width: 480px) 90vw, (max-width: 768px) 45vw, 300px" - srcset 中所有项必须统一用
w描述符（如photo-400.jpg 400w）或统一用x（如photo.jpg 1x, photo@2x.jpg 2x），混写（a.jpg 400w, b.jpg 2x）会让整个 srcset 被浏览器丢弃 - Chrome DevTools Network 面板里看不到
Sec-CH-DPR或Width请求头，说明浏览器压根没启用响应式选择逻辑——大概率是sizes缺失或语法错误（比如写了sizes="50"没单位）
IE 和老旧 WebView 的 fallback 必须靠 src 属性
IE8–IE11、旧版 Android WebView 不解析 srcset、sizes、src 指向的资源。这个 src 不是“备选”，而是唯一入口。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
src必须指向一个真实可访问的图：推荐 CDN 托管的 800w 主图（兼顾清晰度与体积），或 WebP 格式（若确认 CDN 支持）；绝不能是空字符串、"#"、"data:image/gif;base64,R0lGODdhAQABAAAAACwAAAAAAQABAAA="以外的 data URL（IE 不支持） - 不要指望 polyfill（如 picturefill）自动修复 srcset：它只补
picturefill()，否则 DOM ready 后也不会生效 - 如果项目必须兼容 IE，
src应优先选 JPEG 或 PNG；WebP 虽小，但 IE 完全不识别，会导致白屏
运行时 error 事件才是最后一道防线
网络抖动、CDN 缓存污染、防盗链拦截，都可能导致 srcset 选中的图 404，此时静态 HTML 无法挽回，必须靠 JS 监听 error 动态兜底。
- 给
onerror，首次触发后立即赋值img.src = fallbackUrl，并设img.dataset.attempted = "true"防重入 - fallbackUrl 应指向已压过的 WebP 或 PNG（别再加载原图），体积控制在 10KB 以内；若连 fallback 也失败，插入内联 SVG 占位符（零请求）比留空或显示 alt 文字更稳妥
- 避免在
error回调里再调用fetch或动态创建display: none包裹容器——Safari 和多数 Android WebView 会跳过该元素，后续 show 也无效
最容易被忽略的点是：没设宽高或 aspect-ratio。图片加载前若没预留空间，加载完成瞬间撑开布局，导致文字跳动、按钮位移、CLS 飙升——这和 srcset 无关，却是降级体验崩坏的常见源头。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
