srcset本身不提供降级能力，真正起降级作用的是sizes+src+浏览器资源选择逻辑；写错sizes或漏src会导致srcset退化，浏览器按sizes计算渲染宽度再结合DPR匹配srcset中最接近的图，混用w/x单位会直接忽略整个srcset。

srcset 本身不提供“降级”能力，它只负责告诉浏览器“有哪些图可选”；真正起降级作用的是 sizes + src + 浏览器的资源选择逻辑。写错 sizes 或漏掉 src，srcset 就会退化成摆设。

为什么 srcset 加了却还是加载大图

浏览器不是按设备宽度直接查表，而是先用 sizes 算出“这张图在页面里实际占多宽”，再结合设备像素比（DPR）从 srcset 中挑最接近的源。如果 sizes 写成固定值如 "100vw"，而容器被 CSS 限制在 max-width: 600px，浏览器仍会按视口宽度（比如 1440px）去选 1200w 图。

• sizes 必须反映**渲染宽度**，不是容器 CSS 宽度，也不是视口宽度
• 常见可靠写法：sizes="(max-width: 768px) 100vw, 50vw"（移动端全宽、桌面半宽）
• 若容器固定为 320px，直接写 sizes="320px" 比任何媒体查询都准
• 用 Chrome DevTools Network 面板禁用缓存后刷新，右键图片 → “Copy” → “Copy response” 查看真实返回尺寸，验证是否选对

srcset 里 w 和 x 能不能混用

不能。浏览器遇到混用就直接忽略整个 srcset 属性，退回到只加载 src。这是规范硬性要求，不是兼容性问题。

• 同一组响应式图源，统一用 w 描述符：photo-400.jpg 400w, photo-800.jpg 800w
• 同一张图的多倍率版本（如 1x/2x），才用 x：icon.png 1x, icon@2x.png 2x
• 400w 必须对应原图真实宽度是 400 像素，不能写估算值（如“大概 400 左右”）
• 所有 srcset 项必须指向真实可访问路径，404 不会触发 fallback，只会静默失败

src 属性到底要不要删

绝对不能删。src 是 IE、旧 Android WebView、甚至部分 Safari 版本的唯一加载入口。它不是“备用”，而是兜底链的强制起点。

DeepBI DHTML 页面生成器

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

下载

• src 应指向一个高可用 fallback 图：建议用 CDN 托管的 800w JPG，而非空字符串或占位 GIF
• 如果 src 是 "" 或 "#"，IE11 会显示破损图标，Safari 可能白屏
• src 图片尺寸不必最小，但宽高比必须和 srcset 中所有图一致，否则 object-fit 拉伸时失真
• 不支持 srcset 的浏览器（如 IE）会完全忽略该属性，只请求 src —— 这正是你要依赖的行为

如何验证降级是否真生效

别只看 Chrome 默认行为。真实降级失效往往藏在旧浏览器或特殊网络条件下，必须主动模拟。

• DevTools → Network → 勾选 “Disable cache”，刷新后看实际加载的 URL 和响应头 Content-Type
• 切换 User Agent 为 IE11 或 Android 4.4，确认是否发出 .jpg 请求且无控制台报错
• 手动把 srcset 中某张图改 404，观察是否仍显示 src 图（而不是 alt 文字撑开布局）
• 用手机开启 Data Saver 模式，或在 DevTools 的 Network → Throttling 中选 “Slow 3G”，看是否优先加载小图

最容易被忽略的一点：没有 width/height 或 aspect-ratio 的图片，在加载完成瞬间会重排布局。这和降级无关，但会让用户觉得“降级失败导致抖动”。务必给所有 img 设置显式宽高比，哪怕只是 style="aspect-ratio: 16/9"。

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