400w指图片文件原始宽度为400像素，非显示宽度；必须配合sizes才能生效，且w与x描述符不可混用。
srcset 里写 400w 是指图片源的原始宽度，不是显示宽度
很多人误以为 400w 表示“在 400px 宽的屏幕上用这张图”，其实它只告诉浏览器：这张图文件本身的像素宽度是 400 像素。浏览器结合 sizes 和设备像素比（dpr）自己算该选哪张。
-
srcset中的w描述符必须对应图片文件的真实宽度（比如你导出的photo-400.jpg确实是 400×300 像素） - 如果图片被裁剪、缩放导出但没改名，而你硬写
400w，浏览器会按 400px 宽去参与计算，结果可能选错图甚至模糊 - 不能混用
x和w描述符在同一srcset里（例如small.jpg 1x, big.jpg 2x, wide.jpg 800w是非法的）
必须配 sizes 才能让 400w 生效
只写 srcset="img-400.jpg 400w, img-800.jpg 800w" 没用——浏览器不知道“400w 这张图要占页面多宽”，没法比较。得靠 sizes 告诉它：“在不同断点下，这张 <img> 的 CSS 占据宽度是多少”。
- 典型写法：
sizes="(max-width: 768px) 100vw, 50vw"，意思是：小屏时图宽占满视口，大屏时占一半 - 如果
sizes写成固定值如"300px"，那浏览器就永远按 300px 宽来匹配srcset里的w值，和响应式初衷背道而驰 - 千万别漏引号——
sizes=(min-width: 40em) 100vw（没引号）会导致整个srcset失效，降级为只加载src
常见错误：把设计稿尺寸当 w 值写
设计师给的“@2x 切图 800px 宽”，不代表你应该写 800w。关键看这张图文件实际是多少像素。
- 如果你导出的是 800px 宽的 PNG，且没做任何缩放处理 →
img@2x.png 800w正确 - 如果导出的是 400px 宽的图，但设计稿标注“适配 2x 屏”，那它本身就是 2x 下的物理像素，应写
img.png 400w，而不是强行写800w - 用 ImageMagick 或脚本批量检查真实尺寸：
identify -format "%wx%h" photo.jpg，避免凭印象写错
完整可运行示例（含 fallback）
@@##@@
注意：sizes 最后一项 600px 是默认项（无匹配媒体条件时生效），不是“最大宽度”。浏览器会拿这个值和 srcset 里的 w 值做比例换算，选最接近的源。
真正容易被忽略的，是 sizes 里写的宽度单位必须和 CSS 渲染结果一致——如果图片父容器用了 max-width: 100% 但外层有 padding，100vw 就不准了，得用 calc() 或 JS 动态设 sizes。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
