1. 前言

(1) 关于Retina

[1] 概念

所谓“Retina”是一种显示标准，是把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。由摩托罗拉公司研发。最初该技术是用于Moto Aura上。

这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的单独像素。也被称为视网膜显示屏。

[2] 工作方式

以MacBook Pro with Retina Display为例，工作时显卡渲染出2880x1800个像素，其中每四个像素一组，输出原来屏幕的一个像素显示的大小区域内的图像。

这样一来，用户所看到的图标与文字的大小与原来的1440x900分辨率显示屏相同，但精细度是原来的4倍，但对于特殊元素，如视频与图像，则以一个图片像素对应一个屏幕像素的方式显示。故不会产生Windows中分辨率提升使屏幕文字与图像变小，造成阅读困难的问题。这样在设计软件时只需将所有的UI元素的精细度都提高到原来的4倍就可以既保持了观看舒适度，又提高了显示效果。

(2) Retina显示问题

在普通屏中显示正常的图片，在Retina下会出现模糊。于是，我们期望Retina下显示更高分辨率的图像。

[1] 原解决方案

解决方案有img标签方法、javascript方法，还有Media Queries。

简单介绍下Media Queries是采用“device-pixel-ratio”媒体查询像素比来实现。详情参考：

英文原文：http://www.noupe.com/design/the-mobile-web-css-image-replacement-for-retina-display-devices.html

中文译文：http://www.w3cplus.com/css/the-mobile-web-css-image-replacement-for-retina-display-devices.html

[2] 现在用image-set

为什么用image-set而不是Media Queries?

不像Media Queries，image-set不需要告诉浏览器使用什么图像，而是直接提供了图像让浏览器选择。在未来，我希望有人在使用Retina设备浏览网页，但网速慢时，告诉设备采用低分辨率的图像。甚至会更好，他能根据网速智能的选择需要的图像。

使用“Media Queries”的问题是，在高分辨率显示器下他没有选择的权利。也就是说，浏览器分辨率等于1或2或者其他的时候，浏览器必须加载指定的图像。

image-set的好处是，在支持image-set的浏览器会在高分辨下匹配需要的图像，而没有其他额外的功能。但我相信，为浏览器提供不同的图像选择，这浏览器在不同的分辨下选择正确的图像。

image-set能让各种不同分辨下的图像都显示在CSS中的同一个地方。而使用media queries显示不同图像时，你可能会隔开很多行代码，难于寻找到对应的图像。

出自Jason Grigsby: https://cloudfour.com/thinks/safari-6-and-chrome-21-add-image-set-to-support-retina-images/

2. image-set

(1) 兼容性

(2) 写法

div{background-image: url("foo.png"); background-image: -webkit-image-set( "foo.png" 1x,"foo-2x.png" 2x,"foo-print.png" 600dpi );
}

由于一些浏览器不支持image-set，所以先写常规的url方式。对于识别这个属性的，浏览器会在普通屏下显示1x的图像；Retina屏幕下显示2x的图像；更高分辨率（比如印刷）显示600dpi图像。