sizes属性必须严格正确书写，否则浏览器直接忽略导致srcset退化；常见失效原因包括空格缺失、单位错误、兜底项缺失、误放标签及ssr时动态添加无效。
sizes 属性必须写，且格式稍有偏差就完全失效——浏览器会直接忽略整个属性，srcset 退化为只读第一项或 fallback 到 src。
为什么 sizes 写了却没生效
常见现象是：明明写了 sizes="(max-width: 768px) 100vw, 50vw"，但小屏还是加载了 1200w 的图。根本原因不是浏览器“选错了”，而是它压根没用上 sizes。
-
sizes中任意一项缺空格（如(max-width:768px)100vw）→ 整个值被丢弃 - 单位写错：用了
%、rem、calc()或漏掉单位（如写成300而非300px）→ 该项无效 - 最后一项带媒体条件（如
(min-width: 1200px) 33vw）→ 兜底失败，整条 sizes 被忽略 - 写在
<source></source>上而非<img>标签上 → 完全无效（<picture></picture>场景下 sizes 只能放 img）
sizes 值怎么从 CSS 布局反推
别抄设计稿标注，打开 DevTools → Elements → 选中 <img> → 右侧 Computed 面板看 width 的实际像素值，再换算成 vw/px。
- 全宽卡片（左右各 16px margin）：视口减 32px →
100vw在 375px 屏下 ≈ 343px，≈91vw；稳妥起见写(max-width: 480px) 92vw, (max-width: 768px) 92vw, 736px - Grid 三列（
grid-template-columns: repeat(3, 1fr)，间隙共 24px）：每列 ≈33vw（实测误差可接受） - 固定最大宽容器（
max-width: 800px; width: 100%）：写(max-width: 800px) 100vw, 800px - 内联图标（CSS 设了
width: 24px; height: 24px）：直接写sizes="24px"，不用媒体查询
w 描述符 + sizes 的匹配逻辑
浏览器不是“按屏幕大小选图”，而是：当前视口宽度 → 查 sizes 得出“这张图将渲染多宽” → 在 srcset 中找最接近该宽度的 xxxw 项。
- 例如
sizes="(max-width: 480px) 100vw, 50vw"，当前视口 400px → 渲染宽度 ≈ 400px → 浏览器倾向选320w或480w，而不是800w - 如果
srcset里只有400w和1200w，而计算出的渲染宽度是 225px（比如45vw在 500px 视口），浏览器只能选400w—— 即使略大，也没更小的选项 -
src必须存在：它是无 JS、无 srcset 支持时的降级兜底，缺失会导致老浏览器白屏
容易被忽略的兼容细节
现代浏览器对 sizes 解析已较稳定，但仍有几个边界点极易踩坑：
- Safari ≤ 13.1 不支持无兜底的
sizes="(max-width: 768px) 100vw, 50vw"，需显式补上第三项：sizes="(max-width: 768px) 100vw, (min-width: 769px) 50vw, 50vw" - 构建工具（Vite/Webpack）不会自动处理
@2x后缀，srcset="icon@2x.png 2x"要确保文件真实存在，否则 404 -
object-fit和sizes无关：它只控制图片如何填入容器，不影响浏览器选哪张源图 - 服务端渲染（SSR）时若初始 HTML 没带
sizes，JS 后续补上也无效——sizes必须在 HTML 解析阶段就存在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
