今天在某個群里面閑逛，看見一個童鞋分享了一個攜程的移動端的頁面。
地址這里我也分享下吧：http://m.ctrip.com/html5/在手機端我都很少用雪碧圖合并定位圖標，用的比較多就是用字體圖標來代替，有些圖標不多的時候就自己單個的切出來控制了。
?
看了下攜程的手機端的網站這些圖標是用了雪碧圖來合并的，因為一直以來手機端的屏幕大小不一，所以通常都會把設計圖等比例縮放的形式展現，百分比的方式來布局，達到自適應。
下面我們就來說說這個攜程手機端的案例吧：
首先這個雪碧圖的原理與PC端的是一樣的，只不過手機端的要按比例縮放一下。
首先是合并的雪碧圖：
大家發現沒有，雪碧圖的尺寸與原圖剛好縮放了2倍。
再個就是原始 寬度和高度，以及圖標的坐標位置。很明顯通常元素的寬度和高度也就是要顯示的圖標的寬度和高度，這里也要縮放2倍。
下面的圖就是其中某個顯示圖標元素，包括寬度、高度和左邊值剛好都是縮放過2倍的，所以看到這里都明白了吧，手機端的雪碧圖就是這么做的，也挺簡單的吧，比PC端就是多了一步縮放的計算，哈哈。
)
