应根据适配目标选择：需适配布局宽度时用w描述符并强制配合sizes；适配设备像素比且图宽固定时用x描述符，sizes可省略；二者不可混用，否则整个srcset被忽略。
srcset 里写 w 还是 x，取决于你要适配什么
用 w 描述符（如 photo-800w.jpg 800w）是为响应式布局服务的：浏览器会根据图片在页面中的**实际渲染宽度**（由 sizes 告诉它）匹配最接近且不小于该宽度的源。这适合 banner、内容图、卡片内嵌图等宽度随容器变化的场景。
用 x 描述符（如 icon-2x.png 2x）只看设备像素比（DPR），完全不关心布局宽度。它适合固定宽高的小图，比如 logo、头像、按钮图标——但一旦加了 sizes，x 就会被忽略，整条 srcset 可能失效。
混用两者（如 icon-1x.png 1x, photo-800w.jpg 800w）会导致浏览器直接丢弃整个 srcset，回退到 src。必须二选一，不能折中。
sizes 属性不是可选的，而是 w 描述符的强制搭档
只写 srcset 不写 sizes，浏览器根本不知道这张图在页面里占多宽，800w 就只是个数字，无法参与计算。现代浏览器通常 fallback 到加载 src 或第一个候选图；Safari iOS 11–12.0 可能完全不触发选择逻辑。
sizes 的值必须真实反映 CSS 计算后的盒模型宽度，单位只能是 vw、px、em，不能是 %、rem、calc() 或漏单位（如 sizes="50" 是非法的，整条属性被忽略）。
常见写法误区：
-
sizes="(max-width: 768px) 100vw, 50vw"—— 缺少兜底值，Safari 13.1 之前会 fallback 到100vw -
sizes="(max-width: 480px) 100vw, (min-width: 481px) and (max-width: 768px) 768px, 1200px"—— 媒体查询有 1px 缝隙，且冗余复杂 -
sizes="100vw"—— 看似安全，但如果父容器max-width: 600px，桌面端仍会加载远超所需的图
推荐写法：sizes="(max-width: 480px) 100vw, (max-width: 768px) 768px, 1200px"，从左到右匹配，最后一项是兜底，覆盖所有未命中媒体查询的情况。
为什么写了 srcset 还是总加载最大图
核心原因不是代码写错了，而是浏览器没按你预期的宽度去匹配——它默认用 100vw 当作渲染宽度，哪怕你的 CSS 把图片设成了 width: 300px。验证方式只有一个：打开 DevTools → Network → 过滤 .png → 切换设备宽度 → 刷新 → 看实际请求的是哪个文件名。
务必勾选 Disable cache，否则缓存会让小屏也复用之前加载的大图；建议用无痕窗口测试，避免插件干扰。
容易被忽略的几个点：
- CSS 动态改变了容器宽度（比如 sidebar 展开），
sizes不会自动更新，得用 JS 手动重设 - 某些旧版 Android WebView 会静默丢弃
srcset，此时只有src生效，所以src必须指向一个体积适中、清晰度够用的版本（如800w） - 如果
sizes算出的宽度是 225px，但srcset最小只提供320w，浏览器只能硬选，没有“更小图”可选
src 必须存在，且不能是最小图
src 是降级兜底，所有浏览器都识别它。如果只写 srcset，IE、旧版 Safari 会直接不显示图片，连 alt 都不触发。
别把 src 设成最小图（如 320w）。老设备用户看到的就是模糊图；也不该设成最大图（如 1200w），否则不支持 srcset 的环境会白白加载大图。
合理做法是选一个中间档：比如你有 320w、768w、1200w，就把 src 指向 768w 版本——兼顾清晰度与体积。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
