标签需用srcset+sizes声明多倍图源，如srcset="logo-1x.png 1x, logo-2x.png 2x" sizes="(max-width:768px) 100vw, 300px"，使浏览器按设备像素比自动选高清资源。
img 标签怎么写才能在 Retina 屏上不模糊
直接给 <img alt="HTML怎么让图片自适应视网膜屏幕高清显示" > 加 src 是不行的——浏览器默认按 1x 像素密度加载，Retina（2x/3x）屏会自动拉伸，图片立刻发虚。核心解法是让浏览器「知道这张图有更高清版本」，并主动选一个匹配当前设备像素比（window.devicePixelRatio）的资源。
用 srcset + sizes 最可靠
srcset 告诉浏览器有哪些图可用，sizes 告诉它“在不同视口宽度下，这张图大概占多宽”，浏览器据此算出需要几倍图。不依赖 JS，原生支持好，现代项目首选。
常见错误：只写 srcset 不写 sizes，或 sizes 值和实际 CSS 宽度对不上，导致浏览器选错图。
-
sizes必须匹配 CSS 中该<img alt="HTML怎么让图片自适应视网膜屏幕高清显示" >的显示宽度，比如 CSS 设了max-width: 100%; width: 300px，那sizes="(max-width: 768px) 100vw, 300px"才合理 -
srcset里每个地址后必须跟2x或3x，不能只写宽度（如300w），否则无法触发高倍屏适配 - 示例：
<img src="logo-1x.png" srcset="logo-1x.png 1x, logo-2x.png 2x, logo-3x.png 3x" sizes="(max-width: 480px) 100vw, 300px" alt="logo">
CSS background-image 怎么配 @2x
用媒体查询最稳，避免 JS 检测 devicePixelRatio 的兼容性和时机问题。
立即学习“前端免费学习笔记（深入）”；
关键点不是“有没有 @2x 图”，而是“是否覆盖了所有可能的像素比”。iOS、Mac、部分安卓屏有 2x/3x，甚至 Windows 高分屏有 1.25x/1.5x/2x，但多数场景只处理 2x 就够用。
- CSS 里先写普通图作为兜底：
background-image: url(avatar.png); - 再用
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)覆盖高清图 - 注意：不要用
min-device-pixel-ratio: 2（Firefox 不支持），要用带前缀的写法保兼容 - 示例：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .avatar { background-image: url(avatar@2x.png); } }
为什么 不一定比 srcset 更好
<picture></picture> 适合做「艺术指导」（art direction）——比如小屏用裁剪版、大屏用完整版。但如果只是同一构图的高清替换，它反而更重、更易出错。
容易踩的坑：
- 忘了加
<img alt="HTML怎么让图片自适应视网膜屏幕高清显示" >作为 fallback，导致不支持<picture></picture>的老浏览器直接不显示图 -
<source></source>的media和srcset搞混：比如在media="(min-width: 768px)"下又写了srcset="... 2x"，逻辑嵌套容易误判 - 构建时没同步生成所有尺寸图，上线后某条
srcset路径 404，浏览器就退回到低清图，还不报错
真正要解决的是资源交付链路：设计给图、前端命名规范、构建脚本自动生成 @2x、CDN 缓存策略是否区分像素比。单靠 HTML 标签改写，治标不治本。
