sizes属性只告诉浏览器图片在当前视口下的预计渲染宽度，是srcset（w描述符）匹配资源的必要参照；漏写或写错sizes会导致浏览器忽略srcset、加载错误图片。
sizes属性到底告诉浏览器什么
sizes属性不是设置图片宽高，也不是控制布局，它只做一件事：提前告诉浏览器“这张图在当前视口下，**预计会渲染成多宽**”。浏览器拿到这个信息，再结合srcset里的w描述符（比如800w），才能算出该加载哪张资源。漏掉sizes却用了w描述符，浏览器就失去参照，往往退化为只加载src或第一张图。
为什么sizes必须和srcset的w描述符配对用
因为匹配逻辑完全不同：srcset里用x（如2x）时，浏览器看设备像素比；用w时，它必须依赖sizes提供的“目标渲染宽度”来换算。混写srcset="small.jpg 1x, large.jpg 1200w"会导致整个srcset被忽略——这是最常被忽视的硬性规则。
-
sizes值必须是媒体条件 + 长度单位组合，例如"(max-width: 768px) 100vw, 50vw" - 单位只支持
vw、px、em，%无效 - 如果CSS写了
max-width: 400px，sizes就得对应写"(max-width: 400px) 100vw, 400px"，否则选图偏大
sizes写错的典型表现和排查点
现象往往是图片在小屏上加载了2MB的大图，或在桌面端模糊——这不是CDN问题，大概率是sizes没对齐真实渲染宽度。
- 检查CSS中图片容器的实际宽度：是
width: 100%？还是栅格占1/3？或是固定max-width: 600px？ - 确认
sizes断点是否和CSS媒体查询一致，比如CSS在768px切布局，sizes就不能写成(max-width: 767px) - Safari 12.0及更早版本不支持
w+sizes动态匹配，若需兼容，得用<picture></picture>+mediafallback
实际项目中怎么写才不容易翻车
别凭空猜sizes，从CSS出发倒推。比如一个响应式卡片内图片：
- CSS是
width: 100%; max-width: 300px;→sizes="(max-width: 300px) 100vw, 300px" - 放在Bootstrap的
col-12 col-md-6里 →sizes="(max-width: 768px) 100vw, 50vw" - 全屏横幅图 →
sizes="100vw"（但要确认父容器真没padding/margin挤压）
真正容易被忽略的是：sizes不是一劳永逸的静态值，它必须随CSS布局变化而同步更新；改了容器宽度却不调sizes，响应式图片就只剩“响应式”三个字了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
