srcset + sizes 的分段边界由 sizes 决定，浏览器根据 sizes 计算出图片渲染宽度，再结合设备像素比在 srcset 中匹配最接近的 w 值；sizes 必须准确反映图片实际渲染宽度，否则会导致选图错误。
srcset + sizes 的分段边界由 sizes 决定，不是写在 srcset 里
浏览器选哪张图，不看 srcset 里写了几个 w 值，而看 sizes 在当前视口下算出的“图片渲染宽度”，再结合设备像素比（DPR）去 srcset 中找最接近的匹配项。很多人误以为 srcset="a-400w.jpg 400w, a-800w.jpg 800w" 就能自动按屏幕宽切换，其实没有 sizes，浏览器默认按 100vw 算，小屏也拉大图。
常见错误现象：sizes="(max-width: 768px) 100vw, 50vw" 写了，但实际 CSS 容器被限制在 max-width: 600px，导致浏览器始终认为图占 100vw，永远选不到 400w 图。
-
sizes必须反映图片**实际渲染宽度**，不是父容器 CSS width，更不是设计稿标注值 - 媒体查询条件要和真实布局对齐：比如用 Flex/Grid 后容器宽度动态变化，
sizes就得跟着调，不能照搬固定断点 - 避免写死
sizes="100vw"：iOS Safari 横屏时有 bug，建议补成sizes="100vw, 100vh" -
srcset中所有项必须统一用w描述符（如400w），混入2x会让整个属性失效
怎么验证分段边界是否生效
别靠肉眼猜，直接看 Network 面板发出去的是哪张图。关键操作是禁用缓存 + 切换设备模拟器 + 硬刷新（Ctrl+Shift+R）。
常见验证失败原因：sizes 媒体查询没命中、srcset 里某张图 404、CDN 返回了错误 Content-Type（比如 .webp 被当成 image/jpeg）、或用了 Webpack 别名（如 @/assets）导致路径 404。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 打开 Chrome DevTools → Network → 勾选
Disable cache→ 刷新页面 - 筛选类型为
Img，找到对应图片资源，右键 →Copy → Copy response粘贴到编辑器里确认返回尺寸是否匹配预期 - 切到
⚙️ → Sensors → Device pixel ratio，分别设为 1 和 2，观察请求 URL 是否从-400w.jpg变成-800w.jpg - 如果始终只加载一张图，检查
sizes输出值：在 Console 执行document.querySelector('img').currentSrc，对比它和sizes计算出的宽度是否合理
多断点时 sizes 怎么写才不踩坑
sizes 不是 CSS，它只是给浏览器一个“估算提示”。写错顺序、漏括号、或媒体条件重叠，都会让浏览器 fallback 到默认 100vw。
- 语法必须标准：
media="(max-width: 768px)"，不能少括号或引号；media="max-width: 768px"会完全失效 - 断点顺序要从窄到宽，否则前面的
(max-width: 992px)会覆盖后面的(max-width: 768px) - 避免嵌套过深的媒体查询，例如
(min-width: 320px) and (max-width: 480px) and (orientation: portrait)在部分 Android WebView 会解析失败 - 如果图片在不同断点下宽度变化不规则（比如 320px → 480px → 300px），
sizes得写成"(max-width: 480px) 100vw, (max-width: 768px) 480px, 300px"，不能只靠 CSS 推导
为什么写了 sizes 还是加载了大图
最常被忽略的点：图片没设宽高或 aspect-ratio，导致浏览器在 layout 阶段无法准确预估渲染宽度，只能保守选最大图。
- 务必为
img设置width和height属性（不是 CSS），或现代写法style="aspect-ratio: 16/9;" - 如果用 CSS Grid/Flex 布局，确保父容器有明确宽度约束，否则
sizes="(max-width: 768px) 100vw"中的100vw会被当作“视口全宽”，哪怕图只占半屏 - 某些老 Android WebView 对
sizes解析异常，fallback 图建议和主图保持同尺寸，避免加载后重排 -
src属性仍需保留且指向可用资源：IE11 或 JS 失败时，它就是唯一兜底；空src=""或src="#"会导致白屏
真正起作用的不是 srcset 列表本身，而是 sizes 告诉浏览器“这张图现在有多宽”，这个宽度值一旦偏差，整个响应式逻辑就偏了。很多问题表面是 srcset 没生效，根子在 sizes 没对上实际布局。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
