---
title: 你是否使用过视网膜图形？
subtitle: 如果是，你是什么时候以及使用了什么技术？
---

*Retina* 只是一个营销术语，指的是像素比大于 1 的高分辨率屏幕。需要知道的关键是，使用像素比意味着这些显示器正在模拟较低分辨率的屏幕，以便以相同的大小显示元素。如今，我们认为所有移动设备都是 *retina* 默认显示器。

默认情况下，浏览器会根据设备分辨率渲染 DOM 元素，但图像除外。

为了获得清晰、美观的图形，充分利用视网膜显示器，我们需要尽可能使用高分辨率图像。但是，始终使用最高分辨率的图像会影响性能，因为需要通过网络发送更多字节。

为了克服这个问题，我们可以使用 HTML5 中指定的响应式图像。它要求向浏览器提供相同图像的不同分辨率文件，并让它决定哪张图像最好，使用 html 属性 `srcset` 和可选的 `sizes`，例如：

```html
<div responsive-background-image>
  <img
    src="/images/test-1600.jpg"
    sizes="
      (min-width: 768px) 50vw,
      (min-width: 1024px) 66vw,
      100vw"
    srcset="
      /images/test-400.jpg   400w,
      /images/test-800.jpg   800w,
      /images/test-1200.jpg 1200w
    " />
</div>
```

重要的是要注意，不支持 HTML5 的 `srcset` 的浏览器（即 IE11）将忽略它并使用 `src`。如果我们真的需要支持 IE11 并且出于性能原因希望提供此功能，我们可以使用 JavaScript polyfill，例如 [Picturefill](https://scottjehl.github.io/picturefill/)。

对于图标，尽可能使用 SVG，因为它们无论分辨率如何都能非常清晰地渲染。