今天在某個(gè)群里面閑逛，看見(jiàn)一個(gè)童鞋分享了一個(gè)攜程的移動(dòng)端的頁(yè)面。
地址這里我也分享下吧：http://m.ctrip.com/html5/在手機(jī)端我都很少用雪碧圖合并定位圖標(biāo)，用的比較多就是用字體圖標(biāo)來(lái)代替，有些圖標(biāo)不多的時(shí)候就自己?jiǎn)蝹€(gè)的切出來(lái)控制了。

?

看了下攜程的手機(jī)端的網(wǎng)站這些圖標(biāo)是用了雪碧圖來(lái)合并的，因?yàn)橐恢币詠?lái)手機(jī)端的屏幕大小不一，所以通常都會(huì)把設(shè)計(jì)圖等比例縮放的形式展現(xiàn)，百分比的方式來(lái)布局，達(dá)到自適應(yīng)。

下面我們就來(lái)說(shuō)說(shuō)這個(gè)攜程手機(jī)端的案例吧：

首先這個(gè)雪碧圖的原理與PC端的是一樣的，只不過(guò)手機(jī)端的要按比例縮放一下。

首先是合并的雪碧圖：

大家發(fā)現(xiàn)沒(méi)有，雪碧圖的尺寸與原圖剛好縮放了2倍。

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

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

轉(zhuǎn)載于:https://www.cnblogs.com/kt520/p/5681540.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。