方法一：

利用css樣式以及放兩倍圖。
有一張200x200像素的圖片（CSS像素，也就是普通像素點(diǎn)或者說是標(biāo)準(zhǔn)像素點(diǎn)），我們給圖片設(shè)置一個CSS樣式：

img{
     width:200px;
     height:200px;
}

圖片模糊的情況：固定好css像素。將width和height固定好。此時在這個width和height 對于不同的顯示器包含的像素已經(jīng)確定了。然后在兩種不同屏幕上放圖片：那么Ritina屏幕圖片會模糊。因?yàn)闆]有css像素的width height所對應(yīng)Retina顯示器的像素?cái)?shù)那么多。你硬生生的把這張圖片拉成那么大。必然模糊。
在iPad2或Mini iPad中就是很正常顯示的圖片；但是，在New iPad中，1個CSS像素點(diǎn)實(shí)際上有4個位圖像素點(diǎn)，1個分成4個，顯然不夠分啊，只能顏色近似選取，于是，圖片感覺就是模糊的。

因此，要想讓視網(wǎng)膜屏幕下的圖片高清晰顯示，我們需要的圖片的原始大小不能是200×200像素，而需要2倍高寬，即400×400像素，CSS像素限制依然是:

img {
width:200px;
height:200px;
}

此時，視網(wǎng)膜屏幕下圖片就顯示OK了（非視網(wǎng)膜屏幕圖片被壓縮-減少像素取樣——資源浪費(fèi)！）。

方法二：

查詢像素密度：準(zhǔn)備兩種大小但是一樣的圖片。利用css的媒體查詢或者JS的 Retina.js來調(diào)取圖片。（瀏覽器支持是一個問題）1 css：可以通過“device-pixel-ratio”屬性或者其擴(kuò)展屬性“min-device-pixel-ratio”和“max-device-pixel-ratio”。這幾個Media Queries可以使用background-image為Retina準(zhǔn)備高精密度像素的圖片。

.icon {
background-image: url(example.png);
background-size: 200px 300px;
height: 300px;width: 200px;
}
@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) {
          .icon {
                background-image: url(example@2x.png);
          }
}        

方法三：
放縮放的矢量圖形（瀏覽器支持是一個問題）

獲得設(shè)備像素比后，便可得知設(shè)備像素與CSS像素之間的比例。也就是window.devicePixelRatio。
一倍圖：當(dāng)這個比率為1:1時，使用1個設(shè)備像素顯示1個CSS像素。
二倍圖：當(dāng)這個比率為2:1時，使用4個設(shè)備像素顯示1個CSS像素，
三倍圖：當(dāng)這個比率為3:1時，使用9（3*3）個設(shè)備像素顯示1個CSS像素。