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

?

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

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

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

首先是合并的雪碧圖：

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

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

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

轉載于:https://www.cnblogs.com/kt520/p/5681540.html

總結

以上是生活随笔為你收集整理的关于手机端CSS Sprite图标定位的一些领悟的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。