關於手機端CSS Sprite圖標定位的一些領悟

今天在某個羣裏面閒逛，看見一個童鞋分享了一個攜程的移動端的頁面。
地址這裏我也分享下吧：http://m.ctrip.com/html5/在手機端我都不多用雪碧圖合併定位圖標，用的比較多就是用字體圖標來代替，有些圖標很少的時候就本身單個的切出來控制了。

 

看了下攜程的手機端的網站這些圖標是用了雪碧圖來合併的，由於一直以來手機端的屏幕大小不一，因此一般都會把設計圖等比例縮放的形式展示，百分比的方式來佈局，達到自適應。

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

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

首先是合併的雪碧圖：

你們發現沒有，雪碧圖的尺寸與原圖恰好縮放了2倍。

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

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