span.location,
span.success,
a.delete,
.content a.fav-link {
/* Reference the @2x Sprite */
background-image: url(sprite@2x.png);
/* Translate the @2x sprite’s dimensions back to 1x */
background-size: 200px 200px;
}
}
注:记住上面的这个例子仅适用于Retina屏幕下的设备,目前仅在IOS的移动设备iPhone4s、iPhone5、iPad、iPod和Mackbook Pro。对于Android系统下,要取决于你的系统,采用不同的“min-device-pixel-ratio”。
总结
不应该将所有的资源引入一个文件中,应该使用CSS sprite 来集成图片。创建@2x的sprites图,这个图刚好是普通图的两倍,而且具有双向扩展在Retina屏幕下,对应的元素上使用相同的Scripts图片使用background-size属性来确保你的@2x Sprites图正确定位
注意,这只是一个简单的例子,里面对三个元素设置了背景图,你可以根据需要在你的站点上使用更多的图片,按这种方式。在Retina屏幕下,使用这种方法,不仅节约了http的请求,还让你的代码简洁易于维护,同时在Retina下也更高效。
译者手语:初次翻译前端技术博文,整个翻译依照原文线路进行,并在翻译过程略加了个人对技术的理解。如果翻译有不对之处,还烦请同行朋友指点。谢谢!










