标签提供声明式资源选择机制，依赖 的 media 与 srcset 配合实现按屏幕宽度切换图片， 为必需兜底；常见只加载一张图的原因包括 media 条件重叠、缺 、srcset 路径 404 或缓存未清；适配高 DPR 应用 x 或 w（不可混用），sizes 必须写在 上且需与 CSS 容器宽度一致。
怎么写
核心是用 media 属性配合 srcset，让浏览器在不同断点加载对应尺寸的图：
-
media值必须是有效的媒体查询（如(max-width: 768px)），不能写成768px或small -
srcset里可以放多个路径，用逗号分隔；每个路径后可加w（表示该图的自然宽度）或x（表示设备像素比），例如logo-400w.jpg 400w, logo-800w.jpg 800w -
src和srcset
@@##@@
为什么用了
常见原因不是语法错，而是浏览器按规则“选中且仅选中一个”：
- 多个
media条件重叠（比如写了(max-width: 768px)和(max-width: 1024px)），浏览器取第一个匹配项，后面的直接忽略 - 漏写
alt文本 -
srcset路径 404，但浏览器不会报错，只会静默跳过该 - 开发工具 Network 面板没清缓存，看到的仍是之前加载过的图 —— 建议勾选 “Disable cache” 并硬刷新
适配高 DPR 设备（如 Retina 屏）要不要加 x？
要，但别和 w 混用在同一 srcset 里。两者是互斥的描述方式：
立即学习“前端免费学习笔记（深入）”；
- 用
w（推荐）：告诉浏览器“这张图宽 800 像素”，由浏览器结合sizes属性算出需要多大物理尺寸，再选最接近的源。适合响应式布局 - 用
x：直接指定“这个源适用于 2x 屏幕”，例如icon@2x.png 2x。适合固定尺寸图标，不随布局变化 -
sizes必须写在sizes="(max-width: 600px) 100vw, 50vw"
@@##@@
实际项目中最容易被忽略的，是 sizes 属性没同步更新 —— 它和 CSS 中图片容器的实际宽度不一致时，w 描述就失效了，浏览器可能选错源。务必在调整布局后重新核对 sizes 值。
