便于理解，先来了解几个名词：

• dpi(dots per inch)，每英寸的点数，用来测量任何设备的硬件分辨率。一个21”的屏幕可以拥有1680 X 1050 的分辨率，27”的屏幕也可以拥有相同的分辨率，那么大屏幕比小屏幕的dpi小。
• dip(device independent pixels),设备独立像素，与160 dpi显示屏上的1px相等, 又称dp。
• dppx(dots per ‘px’)，每px单位上的点数。由于CSS英寸与CSS像素的固定比是1:96，那么1dppx=96dpi。
• Device pixel ratio (DPR)是物理像素与CSS像素的比率。

方法一：media queries & background-size

查看demo

/*** 注意：background-size的值是sprite.png的尺寸，而不是每个icon的尺寸*/.sprite-icon{    background-image:url(sprite.png);    background-size:98px 65px;       }/*** 每个icon的background-positon只需写一次，即icon相对与1x图片的位置，在@2x图片中的位置也是这个*/.icon-1{    background-position:0 0;}.icon-2{    background-position:-33px 0;}.icon-3{    background-position:-66px 0;}.icon-4{    background-position:0 -33px;}.icon-5{    background-position:-33px -33px;}.icon-6{    background-position:-66px -33px;}/* ** 2x图片要是1x图片的准确2倍** sprite中图标之间的间隙，也应是2倍** 每个图标无需重新写background-position*/@media (min-resolution:2dppx), /* Standard syntax */(-webkit-min-device-pixel-ratio:2)  /* Safari & Android Browser */{    .sprite-icon{        background-image:url(sprite@2x.png);     }  }

方法二：background-image:img-set( url(a.png) 1x, url(a@2x.png) 2x )

媒体查询（media queries）已经可以解决高密度显示问题，为什么还需要image-set？ 问的好。 使用image-set的两个主要好处：

• 与媒体查询不同的是，image-set没有告诉浏览器使用哪个图片，而是提供了一些选项。我希望将来在低网速下使用高密度设备，能够告诉浏览器使用低分辨率图片。如果浏览器能够根据当前的网络状况智能地选择使用的图片，那就更好了。 媒体查询的问题是没有给浏览器任何自由裁决权，它明确的指明，如果像素密度大于1或者2，浏览器就使用特定的图片。 我知道，这只是理论上（更是“意淫“出来）的好处。如今支持“image-set”的浏览器只是简单将图片源与显示密度相匹配，并没有提供额外的功能。但我坚信，同一张图片需要不同分辨率时，让浏览器去选择合适的图片是方向。
• CSS编码好处：将不同分辨率的图片源集中在一起。

查看demo

/* ** 注意： ** 图片要求：2x图片要是1x图片的准确2倍，sprite中图标之间的间隙也应是2倍 ** 无需写background-size,浏览器自动处理 ** */ .sprite-icon{ background-image:url(sprite.png); background-image: -webkit-image-set( url(‘sprite.png‘) 1x, url(‘sprite@2x.png‘) 2x ); }/* ** 每个icon的background-positon只需写一次，即icon相对与1x图片的位置，在@2x图片中的位置也是这个 */ .icon-1{ background-position:0 0; } .icon-2{ background-position:-33px 0; } .icon-3{ background-position:-66px 0; } .icon-4{ background-position:0 -33px; } .icon-5{ background-position:-33px -33px; } .icon-6{ background-position:-66px -33px; }

方法三： media queries & background-size，适用于仅部分图标提供了2x图，且icon位置不对应，可能是由工具生成的sprite。

查看demo

.sprite-icon{    background-image:url(more.png);}.icon-1{    background-position:0 0;}.icon-2{    background-position:-33px 0;}.icon-3{    background-position:-66px 0;}.icon-4{    background-position:0 -33px;}.icon-5{    background-position:-33px -33px;}.icon-6{    background-position:-66px -33px;}.icon-7{    background-position:0 -66px;}/* ** 每个icon的backgroud-size是2x图片的一半** 每个icon的backgroud-position是相对与2x图片的位置除以2*/@media (min-resolution:2dppx), /* Standard syntax */(-webkit-min-device-pixel-ratio:2)  /* Safari & Android Browser */{    .icon-1{        background-image:url(portion@2x.png);         background-size:197px 65px;        background-position:0 0;    }    .icon-2{        background-image:url(portion@2x.png);         background-size:197px 65px;        background-position:-33px 0;    }    .icon-3{        background-image:url(portion@2x.png);         background-size:197px 65px;        background-position:-66px 0;    }    .icon-4{        background-image:url(portion@2x.png);        background-size:197px 65px;        background-position:-99px -33px;    }    .icon-5{        background-image:url(portion@2x.png);         background-size:197px 65px;        background-position:-132px -33px;    }    .icon-6{        background-image:url(portion@2x.png);        background-size:197px 65px;        background-position:-165px -33px;    }}

RETINA显示屏下ICON优化方法