你是否使用过视网膜图形?
如果是,你是什么时候以及使用了什么技术?主题
CSS
在GitHub上编辑
Retina 只是一个营销术语,指的是像素比大于 1 的高分辨率屏幕。需要知道的关键是,使用像素比意味着这些显示器正在模拟较低分辨率的屏幕,以便以相同的大小显示元素。如今,我们认为所有移动设备都是 retina 默认显示器。
默认情况下,浏览器会根据设备分辨率渲染 DOM 元素,但图像除外。
为了获得清晰、美观的图形,充分利用视网膜显示器,我们需要尽可能使用高分辨率图像。但是,始终使用最高分辨率的图像会影响性能,因为需要通过网络发送更多字节。
为了克服这个问题,我们可以使用 HTML5 中指定的响应式图像。它要求向浏览器提供相同图像的不同分辨率文件,并让它决定哪张图像最好,使用 html 属性 srcset
和可选的 sizes
,例如:
<div responsive-background-image><imgsrc="/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,因为它们无论分辨率如何都能非常清晰地渲染。