在 中需用 media 属性（如 "(min-resolution: 2dppx)"）触发高倍图， 的 srcset 中 2x 仅在 media 匹配后生效，不可单独使用 media="2x"。
picture 里怎么写 1x / 2x 倍率？别直接往 srcset 里硬塞
浏览器不认 logo@2x.png 2x 这种写法——除非你用的是 <img> 标签的 srcset，而 <picture></picture> 中的 <source></source> 不支持单独用 2x 描述符匹配设备像素比。它只响应 media 查询或 sizes + w 宽度描述符。
想靠像素密度触发不同图，必须显式写 media 条件：
-
media="(-webkit-min-device-pixel-ratio: 2)"（Safari / Chrome 旧版） -
media="(min-resolution: 2dppx)"（标准写法，推荐） - 两者可同时写，用逗号分隔，确保兼容
错误示范：<source srcset="logo-2x.png" media="2x"></source> —— 这个 2x 不是合法媒体查询，浏览器直接跳过。
为什么不能只靠 srcset + 2x 在 picture 里生效？
<source></source> 的 srcset 属性虽然语法上支持 2x，但它的作用前提是：该 <source></source> 已经被 media 匹配中。也就是说，media 是“开关”，srcset 是“内部选图逻辑”。没打开开关，后面的 2x 根本不执行。
常见误判场景：
- 写了
<source srcset="a.jpg 1x, b.jpg 2x"></source>但没写media→ 浏览器忽略整个<source></source>，退到<img> - 写了
media="(max-width: 768px)"，但用户在 2x 平板（宽度 768px、dpr=2）上访问 → 此时只按宽度匹配，不会额外升到 2x 图，除非你在该<source></source>的srcset里明确提供2x版本
所以正确组合是：media 定义适用设备范围，srcset 在该范围内再按密度细分。
实际部署时容易 404 的三个路径坑
构建工具（如 Vite/Webpack）默认不会自动补 @2x 后缀或生成双倍图，导致 srcset 里的 2x 路径 404。常见问题：
- 静态资源未开启
2x图生成（比如只放了icon.png，却在srcset里写了icon@2x.png 2x） - 构建后路径被 hash，但
@2x图没同步 hash，导致引用失效 - 使用相对路径时，
<source></source>的srcset解析基准是 HTML 当前路径，不是 CSS 或 JS 所在目录，容易错位
建议：所有 2x 图必须手动准备并验证 HTTP 状态码；用 curl -I 或 Network 面板确认是否返回 200。
alt 文本只能写在 ![]()
里，且不可省略
<picture></picture> 中所有 <source></source> 都不支持 alt，这是硬性限制。如果漏掉 <img> 或它的 alt 属性，会导致：
- 读屏器无法读取图片含义
- 不支持
<picture></picture>的旧浏览器（如 IE）显示空白+无替代文本 - Lighthouse 可访问性审计失败
即使你为每个 <source></source> 提供了完全不同的构图（art direction），alt 也必须统一描述图像的语义意图，而不是画面细节。例如用 alt="产品主视觉：无线降噪耳机开箱"，而非 alt="手机拍的白色耳机特写"。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
