因为sizes单独写没效果，它仅告知浏览器图片在布局中的预期宽度，必须与srcset配合使用：浏览器依据sizes计算目标宽度，再从srcset中选取最匹配的资源；若缺失srcset或srcset仅含单图，sizes即被忽略。
为什么 sizes 单独写没效果？
因为 sizes 本身不决定加载哪张图，它只告诉浏览器“在当前布局下，这张图片大概会占多宽”。真正起作用的是和 srcset 配合——浏览器用 sizes 算出目标宽度，再从 srcset 列表里挑最接近的源。
常见错误是只写 sizes 却没配 srcset，或者 srcset 里只有单个 URL（比如 srcset="img.jpg"），这时 sizes 完全被忽略。
-
sizes值必须是有效的长度或媒体条件，例如sizes="(max-width: 768px) 100vw, 50vw"，不能写成sizes="100px"这种固定值（除非你真希望所有设备都按 100px 渲染） - 如果页面有 CSS 设置了图片宽度（比如
width: 100%），但sizes写的是50vw，浏览器仍以sizes为准计算 —— 这可能造成尺寸误判，尤其在响应式布局中 - Chrome DevTools 的 Network 面板里看图片请求时，鼠标悬停能看到 “Size selected” 字样，点开能查到浏览器根据
sizes和srcset实际选了哪个资源
sizes 里的 vw 和 CSS 中的 vw 是一回事吗？
是，但要注意：这里的 vw 指视口宽度（viewport width），不是父容器宽度。所以 sizes="50vw" 表示“这张图将占据视口一半宽度”，哪怕它被塞进一个 width: 200px 的 div 里也照算。
真实场景中更常用媒体条件组合：
- 典型移动端适配：
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" - 卡片内图片：
sizes="(min-width: 1024px) 250px, 100vw"—— 大屏下固定 250px，小屏铺满 - 避免写死像素值：除非你 100% 确定容器宽度不会变（比如固定栅格系统中的 col-4），否则优先用
vw或媒体查询
和 picture 元素混用时 sizes 写在哪？
写在 source 标签上，不是 img 上。每个 source 可以有自己的 sizes，对应其 media 条件下的布局表现。
示例：
<picture><source media="(min-width: 1024px)" srcset="hero-large.webp" sizes="960px"><source media="(min-width: 768px)" srcset="hero-medium.webp" sizes="720px"> @@##@@ </source></source></picture>
注意三点：
- 最后一个
img必须带sizes，它是 fallback，浏览器没匹配到任何source时就靠它 -
source的sizes只在对应media触发时生效，互不影响 - 不要在
source上写src—— 它只接受srcset，且必须配合sizes才能做宽度计算
调试时发现图片总是加载最小那张，怎么查？
先确认 sizes 计算结果是否合理：打开 DevTools → Elements → 选中 img 标签 → 在右侧面板的 Computed 里搜 size，能看到 “Image natural size” 和 “Rendered size”，但关键要看 “Effective size for srcset” —— 这才是浏览器实际用于匹配 srcset 的宽度值。
- 如果这个值远小于预期（比如显示为
100px而你写了sizes="50vw"），说明 CSS 有强制缩小（如max-width: 100px）或父容器限制太紧 -
srcset里单位不统一也会误导：比如混用1x、2x和300w，浏览器优先按w描述符匹配，此时sizes才参与计算；而x描述符只看设备像素比，sizes几乎不起作用 - 用
devicePixelRatio检查当前设备缩放：在 Console 里输window.devicePixelRatio，如果是 2，那srcset="100w, 200w"+sizes="100px"就会倾向加载 200w 版本
复杂点在于，sizes 的解析发生在 layout 之前，而 CSS width 可能受 flex/grid 影响延迟计算 —— 这时候浏览器会用初始估算值，容易偏差。真要稳，就别依赖动态容器，把 sizes 绑定到确定的视口逻辑上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
