HTML5中用srcset适配视网膜屏需结合x描述符（如“icon.png 1x, icon@2x.png 2x”）匹配设备像素比，或配合sizes与w描述符实现响应式高清双适配；favicon不支持srcset，须用多个link标签提供不同尺寸。

在 HTML5 中，用 srcset 为视网膜屏幕（如 Retina、2x 屏）提供高清晰度图标，核心是让浏览器根据设备像素比（dpr）自动选择最合适的图片资源。关键不是只写分辨率，而是配合 sizes 或直接使用 x 描述符来声明不同 DPR 下的候选图像。

用 x 描述符匹配设备像素比

这是最直观、最常用的方式，适合固定尺寸的图标（比如 16×16px 显示区域）：

• 假设你有一个标准尺寸图标 icon.png（16×16 像素），和一个高清版本 icon@2x.png（32×32 像素）
• HTML 写法如下：

  srcset="icon.png 1x, icon@2x.png 2x"
  alt="设置图标">

浏览器会根据当前设备的 window.devicePixelRatio 自动选：dpr=1 时用 1x，dpr≥2 时倾向用 2x 版本。

配合 sizes 实现响应式 + 高清双适配

当图标在页面中尺寸会随布局变化（比如导航栏图标在桌面端显示 24px、移动端显示 20px），就需结合 sizes 属性，用 w 描述符更精准控制：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 准备三张图：icon-24.png（24×24）、icon-48.png（48×48）、icon-72.png（72×72）
• 告诉浏览器“在宽度 ≥768px 的视口下，这个图标渲染为 24px 宽；否则为 20px”

  srcset="icon-24.png 24w,
        icon-48.png 48w,
        icon-72.png 72w"
  sizes="(min-width: 768px) 24px, 20px"
  alt="设置图标">

这样浏览器能结合视口宽度、设备 DPR 和图片固有宽高，选出最匹配的资源——既适配布局变化，又兼顾高清屏。

图标类元素（如 ）不支持 srcset

标签中的 favicon 不识别 srcset。要支持高分屏图标，得用 media 或 type + 多个 ：

现代浏览器（Chrome、Firefox、Safari）会按需加载最匹配尺寸的图标，包括对 2x/3x 屏的支持。

实际建议与注意事项

• 小图标（≤32px）优先用 SVG：矢量、无缩放失真、体积小，天然适配所有 DPR
• 必须用位图时，至少提供 1x 和 2x 两版；iOS Safari 对 3x 支持良好，可酌情增加
• src 属性仍需保留——它是兜底项，当浏览器不支持 srcset 时会回退使用
• 测试时可用 Chrome DevTools 的 “Rendering” 面板模拟不同 DPR，或真机访问验证

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！