我去，這個標題好長，想了半天還是這麼個大長標題。其實本文的內容簡單來說就是在 Retina 螢幕下，一般的圖片會顯得不清晰，所以我們就要 2X 的圖片來縮放到 50%（因為物理解析度不會變）來保證清晰度。後來出現的字型表徵圖解決了 2X 放大的問題，但是一些複雜的圖片還是無法用字型表徵圖代替，於是我們又回到了 2X 圖片的問題。2X 圖片多了之後又會影響載入速度，在普通圖片的時候我們可以用 CSS Sprites 比較完美的解決，但一張圖片放好幾個 2X 圖片定位座標的時候又會有一個縮放的問題，本文的重點就是解決這個問題。
這裡要說明圖片的背景是透明的，白色是我為了方便大家識別填充進去的~
圖片為八個大小完全一樣的 2X 圖片無縫的拼進去的。
縮放尺寸
這裡就是本文的關鍵所在了，圖片是需要進行縮放才能放進去的，原來單一的圖片的時候我們直接用 CSS 的 background-size:50% 即可，但現在卻不管用了，因為現在的 50% 實際是下圖的樣子：
那該怎麼辦呢？很簡單。
首先，如果你的表徵圖尺寸不一請把每個表徵圖的空間都按最大的那個擺好，然後把原始表徵圖放在左上方：
並且必須確保每個圖片的空間都是正方形（注意是空間，不是圖片具體大小），然後記住每個空間的邊長。
把 CSS 的
background-size 調整成
X00%，其中
X 為表徵圖數量較多的一列的表徵圖數量。
列如上邊的示範，每橫排有四個表徵圖，每豎排有兩個表徵圖，取較多的橫排，所以
X 為
4，
background-size 即為
400%
調用尺寸
縮放完畢就該調用了。列如調用上圖的第一行第二列的 “分類黑色” 表徵圖，它在上圖的尺寸為 102px，但我想讓他顯示的物理解析度為 44px，那好，首先弄一個標籤，長寬為 44px，座標（background-position）即為 44px（X 軸）和 0（Y 軸）。
這樣就很完美的顯示出來了，解決了 Retina 下雪碧圖（CSS Sprites）的小尷尬。
