可以創建一張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 = 2 96/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; }