RETINA顯示屏下ICON優化方法

便於理解，先來了解幾個名詞：

• 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;
    }

}