测验

你是否使用过视网膜图形?

如果是,你是什么时候以及使用了什么技术?
主题
CSS
在GitHub上编辑

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

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

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

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

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

在GitHub上编辑