33 lines
1.7 KiB
Plaintext
33 lines
1.7 KiB
Plaintext
---
|
||
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，因为它们无论分辨率如何都能非常清晰地渲染。
|