sizes属性在旧版edge和ie中不生效，因其语法极其敏感：空格、单位缺失、媒体条件顺序错误均导致整个属性被忽略而回退至src；必须带单位、括号内禁空格、兜底值须无媒体条件、ie11不支持calc()；验证需通过network面板观察实际请求图源。
为什么 sizes 属性在旧版 Edge 或 IE 里不生效
因为旧版 Edge（EdgeHTML）和 IE11 对 sizes 的语法极其敏感：空格、单位缺失、媒体条件顺序错乱，都会导致整个属性被忽略，浏览器退回到只加载 src 指向的图。
常见错误现象：sizes="(max-width: 768px) 100vw, 50vw" 在 IE11 中完全无效；sizes="(max-width:768px)100vw,50vw"（无空格）反而能被旧版 Edge 解析；控制台看不到报错，但 Network 面板里永远只请求 src 的那张图。
-
sizes必须带单位——50是非法的，必须写成50vw或500px - 媒体条件括号内不能有空格：
(max-width:768px)安全，(max-width: 768px)在 EdgeHTML 下可能失效 - 兜底值必须存在且无媒体条件，比如
33vw合法，(min-width: 769px) 33vw是无效写法 - IE11 不支持
calc()在sizes中，哪怕 CSS 里用了width: calc(100vw - 32px)，sizes也得换算成固定值或 vw 表达式
如何验证 sizes 是否被浏览器真正采纳
别信“看起来清晰”，也不靠模拟器缩放——唯一可靠方式是看 Network 面板里实际发出的图片请求。
实操步骤：
- 打开 DevTools → Network → 过滤
img - 勾选
Disable cache（Chrome）或关闭缓存（Safari） - 手动拖动窗口宽度，或切换设备预设（如 iPhone SE、iPad Pro）
- 刷新页面，观察加载的是
hero-400w.jpg还是hero-1200w.jpg - 如果始终只加载
src指向的图，检查控制台是否报Failed to parse 'srcset' value，或sizes值里有没有漏单位、多空格、混用%或rem
兼容性兜底：当 sizes 不被支持时怎么保底
IE11 和部分安卓 4.x WebView 完全忽略 sizes，但不会报错；此时浏览器仅靠 srcset 中的 x 描述符或直接回退到 src。所以不能把关键图放在 src 指向超大图上。
-
src应指向中等尺寸图（如800w），而非1920w大图，避免老浏览器卡顿 - 对必须高清显示的图（如头像），可用
srcset="avatar-1x.jpg 1x, avatar-2x.jpg 2x"+width/height固定尺寸，绕过sizes依赖 - 若项目仍需支持 IE11，建议用
<picture></picture>+<source media></source>显式声明断点，比sizes更可控（虽然代码略冗长） - 所有响应式图都应配
max-width: 100%和height: auto，防止 fallback 时溢出容器
移动端真实渲染宽度和 sizes 声明不一致怎么办
浏览器只认 sizes 里写的值，它根本不读你的 CSS。如果你的图片在移动端实际渲染宽是 calc(100vw - 32px)，但 sizes 还写 100vw，浏览器就会按视口全宽选图——小屏加载 2MB 的 1200w 图，桌面端却因选图太小而模糊。
- 打开 DevTools → Elements → 选中
img→ 右侧 Computed 面板看width值，在每个断点下记下这个数字 - 把该像素值换算成
vw：例如 iPhone SE 视口 375px，图片渲染宽 343px →343 / 375 * 100 ≈ 91.5vw，写进sizes - 如果父容器用
grid或flex，图片占 1/3 栅格，就别再写100vw，而要按实际占比计算（如33vw） - CSS 改了布局，
sizes必须同步改——它不是一次设置永久有效，而是随布局实时绑定的契约
最容易被忽略的点：sizes 声明的宽度，和图片真实渲染宽度之间哪怕只差 10px，在小屏高 DPR 设备上也可能导致加载错一档图源。这不是精度问题，是浏览器选图逻辑的硬规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
