HTML怎么用srcset做响应式图片同时兼顾兼容降级-html教程-PHP中文网

src属性是唯一可靠兜底，必须指向真实可访问的JPG/PNG图；srcset仅提供现代浏览器候选资源，不支持时自动回退至src，二者须共存且分工明确。

html怎么用srcset做响应式图片同时兼顾兼容降级

srcset 本身不负责“兼容降级”，它只提供候选资源；真正兜底的是 src 属性。只要 src 指向一个真实可访问、格式广泛支持的图（如 .jpg 或 .png），老浏览器（IE、旧 Android WebView）就能显示，现代浏览器则按规则选 srcset 中最合适的——这是唯一可靠、零 JS 的降级路径。

src 和 srcset 必须同时存在且分工明确

很多人只写 srcset，结果 IE 直接不渲染图片，连 alt 都不显示。这不是 bug，是规范行为。

src 是强制存在的兜底：必须指向一个体积适中、格式兼容性极广的图（比如 800w 的 .jpg），不能是空字符串、"#" 或 404 路径
srcset 是可选增强：只在支持它的浏览器中生效，提供更细粒度的资源选择能力
不支持 srcset 的浏览器会忽略整个属性，只加载 src；支持但匹配失败时，也自动回退到 src

sizes 属性写错，srcset 就等于白写

只写 srcset="a.jpg 400w, b.jpg 800w" 却漏掉 sizes，浏览器会默认按 100vw 计算渲染宽度，小屏手机也可能加载 800w 图——这不是“没降级”，是选错了。

DeepBI DHTML 页面生成器

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

下载

sizes 必须反映图片**实际渲染宽度**，不是容器宽度，也不是“大概差不多”：比如 flex 项里占 50%，就得写 sizes="(max-width: 768px) 100vw, 50vw"
所有 srcset 条目必须统一用 w 描述符（如 photo-400.jpg 400w），混用 x（如 2x）会让整个 srcset 被浏览器静默忽略
检查是否生效：打开 DevTools → Network → 点开图片请求 → 看 Request Headers 里有没有 Sec-CH-DPR 或 Width，没有说明浏览器压根没走响应式逻辑