通過搜集相關(guān)資料，發(fā)現(xiàn)一個比較普遍的解決方案：retina.js+CSS Media Queries。
retina.js
retina.js下載地址：retina.js官網(wǎng)下載 和 免費cdn。
詳細介紹和步驟啥的，看這個《走向視網(wǎng)膜（Retina）的Web時代》和《如何一步步把網(wǎng)站Retina優(yōu)化》文章。
retina.js針對img標(biāo)簽的圖片，直接用就行。背景圖片還是得用CSS Media Queries
示例代碼：
<div class="img">
[站外圖片上傳中……(3)]
[站外圖片上傳中……(4)]
<div class="logo"></div>
</div>
CSS Media Queries
css屬性：device-pixel-ratio和-webkit-image-set
先看看兩者的兼容性：
第二個截圖，不是確切。加上私有屬性“--webkit-”，Safari 6+和chrome 21+都支持的。這個屬性僅是CSS4的一個草案。（注：第二種方法沒法用于img標(biāo)簽。）
看見上面兩種方法的兼容性都不咋地好，你可能會立馬否決使用它。其實不然，上面提到我是看了好幾個網(wǎng)站的源碼才偶然發(fā)現(xiàn)第二種方法的，那么久給你看看結(jié)果：蘋果網(wǎng)站（第一種），華為（第一種，不過由于它使用的jquery fancybox插件，是這個插件帶得，可以估計不算在內(nèi)。），魅族（第二種），小米（第二種），錘子（第二種），騰訊首頁（第二種）。
再者你仔細想想，retina屏的用戶群，都是些蘋果的手機(iphone)和ipad以及筆記本（rmbp）等等設(shè)備，也就恰好在該屬性兼容范圍內(nèi)。
示例代碼：
.test {
background-image: url('img/logo.jpg');
background-image: -webkit-image-set(url('img/logo.jpg') 1x,url('img/logo@2x.jpg') 2x);
background-size: 425px 195px;
width: 425px;
height: 195px;
}
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5),
(min-resolution: 192dpi) {
.logo {
background-image: url('img/logo@2x.jpg');
background-size: 425px 195px;
width: 425px;
height: 195px;
}
}
