手機端CSS Sprite表徵圖定位的學習筆記

在手機端我都很少用雪碧圖合并定位元影像標，用的比較多就是用字型表徵圖來代替，有些表徵圖不多的時候就自己單個的切出來控制了。

看了下攜程的手機端的網站這些表徵圖是用了雪碧圖來合并的，因為一直以來手機端的螢幕大小不一，所以通常都會把設計圖等比例縮放的形式展現，百分比的方式來布局，達到自適應。

下面我們就來說說這個攜程手機端的案例吧：

首先這個雪碧圖的原理與PC端的是一樣的，只不過手機端的要按比例縮放一下。

首先是合并的雪碧圖：

大家發現沒有，雪碧圖的尺寸與原圖剛好縮放了2倍。

再個就是原始 寬度和高度，以及表徵圖的座標位置。很明顯通常元素的寬度和高度也就是要顯示的表徵圖的寬度和高度，這裡也要縮放2倍。

下面的圖就是其中某個顯示表徵圖元素，包括寬度、高度和左邊值剛好都是縮放過2倍的，所以看到這裡都明白了吧，手機端的雪碧圖就是這麼做的，也挺簡單的吧，比PC端就是多了一步縮放的計算，哈哈。