使用CSS3的background-size最佳化Sprites圖顯示

標籤：使用   os   io   問題   cti   工作   size   不同的   

可以建立一張Sprites圖，這張圖既有普通解析度映像，又有高解析度下的映像？

你可以，但你還是要面對，你的使用者在一個較慢的頻寬下下載一個大圖的煩惱。你也要同時面對IE9以下的瀏覽器不支援background-size的麻煩問題。

你最好還是分別為高解析度和普通解析度建立不同的兩張Sprites圖。這個時候又有不同的聲音了，這不是增加工作量嗎？但這真的不是,在我的工作 流中，我會先建立一張高解析度的Sprites映像，然後制一份，並把尺寸縮放一半。當映像需要更新時，只需要再一次處理高解析度下的映像，然後複製，重 置一半的尺寸儲存。

當我的Sprites映像是300px,如何指定background-size為32px呢？其實不難，只需要一點點數學計算,這是一個很初級的過程。

在我們的執行個體中,我們使用媒體社交表徵圖.我想讓他們都按16px x 16px的大小顯示。我們將建立一個適合Retina螢幕裝置的Sprites 映像，將映像尺寸翻倍(32px x 32px)，並且儲存他。為了保證普通顯屏裝置的映像顯示，在這個映像的基礎上做了一半的縮小。

 

在最初的CSS樣式中，background-position的屬性值都不需要進行任何設定，因為他們的預設值都是“0”，如下所示：

#social-icons .facebook {  background: url(images/social-sprite.png);   background-position-x: 0px;   background-position-y: 0px;  height: 16px;  width: 16px;} #social-icons .facebook:hover {  background-position-y: -16px;}

對於我們的Retina螢幕顯示，我們必須聲明一個Media Queries,該Media Queries專門針對Retina螢幕裝置顯示器。我們同時改變背景大小而不是寬度和高度。

因此，最關鍵的問題是，我們怎麼知道background-size屬性值要設定為多少？

這裡有一個公式

高解析度映像寬度 / 靶心圖表像寬度 = X原始Sprites映像寬度 / x = background-size的寬度值

執行個體說話

我們高解析度下的表徵圖是32px x 32px;

我們靶心圖表像的寬度是“16px”；

我們Sprites映像的總寬度是“96px”

根據前面的公式 可以得知

32/16 = 296/2 = 48

最後的一件事情。我們只計算了背景映像的寬度值，為了確保背景映像縮放比例正常，我們將“height”值設定為“auto”。當然你也可以設定相的的值（設定background-sizer的寬度為auto，高度為具體值），但我發現設定寬度會比較容易。

@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max-moz-device-pixel-ratio: 2) {  #social-icons .facebook {    background: url(images/social-sprite2x.png);     background-position-x: 0px;     background-position-y: 0px;    background-size: 48px auto;  }  #social-icons .facebook:hover {   background: url(images/social-sprite2x.png);    background-position-x: 0px;    background-position-y: -32px; }