33 lines
1.7 KiB
Plaintext
33 lines
1.7 KiB
Plaintext
---
|
||
title: 您是否曾使用视网膜屏幕工作过？
|
||
subtitle: 如果是这样，你是在什么时候使用的，使用了什么技术？
|
||
---
|
||
|
||
视网膜 （_Retina_） 只是一个营销术语，指的是高分辨率屏幕，像素比大于 1。 需要了解的关键是使用像素比值表示这些屏幕正在模拟低分辨率屏幕以显示大小相同的元素。 如今，我们认为所有的移动设备都是事实上的视网膜屏幕。
|
||
|
||
浏览器默认根据设备分辨率渲染 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(引用中的链接)。
|
||
|
||
对于图标，尽可能使用 SVG，因为无论分辨率如何，它们都会呈现得非常清晰。
|