現(xiàn)在開發(fā)移動端 wap 頁面，相信大家都會使用強(qiáng)大的 rem 單位去適配各種機(jī)型和屏幕；為了減少網(wǎng)絡(luò)請求數(shù)量，提高網(wǎng)頁訪問性能，一般都會把多個小 icon 合并成一張 sprite 圖，然后根據(jù) background-position 進(jìn)行定位；但是由于計算機(jī)的計算偏差，常常會導(dǎo)致 icon 的顯示有1到2像素的偏差；

一、PC 端

如果在 PC 端，雪碧圖的定位其實(shí)非常簡單，不多說，直接上代碼：

html 代碼

<ul class="sprites-box">
    <li class="icon icon-bill"></li>
    <li class="icon icon-emailmsg"></li>
    <li class="icon icon-import"></li>
    <li class="icon icon-music"></li>
    <li class="icon icon-pay"></li>
    <li class="icon icon-search"></li>
    <li class="icon icon-speak"></li>
    <li class="icon icon-task"></li>
</ul>

css 代碼

body, ul { margin: 0; }
ul { padding: 50px; list-style: none; overflow: hidden; }
li { float: left; margin: 10px; }
.icon { background-image: url('./sprite.png'); }
.icon-bill { background-position: -35px 0px;  width: 32px; height: 32px; }
.icon-emailmsg { background-position: 0px -32px; width: 32px; height: 32px; }
.icon-import { background-position: -32px -32px; width: 32px; height: 32px; }
.icon-music { background-position: -67px 0px; width: 32px; height: 32px; }
.icon-pay { background-position: 0px 0px; width: 35px; height: 32px; }
.icon-search { background-position: -67px -32px; width: 32px; height: 32px; }
.icon-speak { background-position: 0px -64px; width: 32px; height: 32px; }
.icon-task { background-position: -32px -64px; width: 32px; height: 32px; }

效果

因?yàn)槠涫褂?px 定位，且屏幕單位和倍率都是固定的，所以可以完美的實(shí)現(xiàn)雪碧圖效果；

二、移動端

在移動端，由于各種機(jī)型的屏幕倍率，使得使用 px 作為單位的布局會有很大的適配問題，所以現(xiàn)在主流的適配方案就是使用 rem 作單位，并且根據(jù)屏幕倍率計算 rem 的基值進(jìn)行適配；

本人是以寬為 750 的設(shè)計稿為基礎(chǔ)，每 1rem 的值為設(shè)計稿中 100px 的長度； 由于 icon 的大小尺寸基本一致，故稍微做了點(diǎn)處理，裁切掉了 icon 的透明部分，合成尺寸不統(tǒng)一的 sprite 圖；

1、直接轉(zhuǎn)換為 rem 單位 換算后以上雪碧圖的 css 代碼為：

body, ul { margin: 0; }
ul { padding: 0.5rem; list-style: none; overflow: hidden; }
li { float: left; margin: 0.1rem; }
.icon { background-image: url('./sprite.png'); background-size: 0.96rem 0.92rem; background-repeat: no-repeat; }
.icon-bill { background-position: -0.67rem -0.26rem; width: 0.28rem; height: 0.26rem; }
.icon-emailmsg { background-position: 0 -0.64rem; width: 0.26rem; height: 0.28rem; }
.icon-import { background-position: -0.26rem -0.64rem; width: 0.26rem; height: 0.28rem; }
.icon-music { background-position: -0.35rem 0; width: 0.32rem; height: 0.32rem; }
.icon-pay { background-position: 0 0; width: 0.35rem; height: 0.32rem; }
.icon-search { background-position: -0.32rem -0.32rem; width: 0.29rem; height: 0.27rem; }
.icon-speak { background-position: 0 -0.32rem; width: 0.32rem; height: 0.32rem; }
.icon-task { background-position: -0.67rem 0; width: 0.29rem; height: 0.26rem; }

效果：

細(xì)心留意可以看出，部分地方顯示會有大概 1px 的偏差，這是由于不同手機(jī)計算偏差導(dǎo)致的，如果 icon 較為簡單，可以接受這種效果也沒關(guān)系，如果對 icon 顯示的要求較高，則這種方式很明顯不能達(dá)到要求；

2、轉(zhuǎn)換為 rem 后通過 百分比進(jìn)行定位

首先確認(rèn) background-position 使用百分比定位的概念：

屬性值為百分比時，將以指定的點(diǎn)為重合點(diǎn)擺放雪碧圖和顯示 icon 的框。 簡而言之，假設(shè)值為 10% 20%，則是將 sprite 圖的 10% 20% 位置的點(diǎn)與顯示框 10% 20% 的點(diǎn)重合（并不是 0% 0% 的點(diǎn)）

舉個栗子：有一張 200X200 的 sprite 圖，和一個 50X50 的 icon 顯示框，這時如果設(shè)置 background-position: 0% 0%;

效果如下：

如果設(shè)置 background-position: 100% 100%; ，會先獲取 icon 框 100% 100% 位置的點(diǎn)，和 sprite 圖 100% 100% 位置的點(diǎn)，然后將其重合；

效果如下：

由此可知：其百分比定位的效果相當(dāng)于先將 icon 框左上角的位置定位到 sprite 圖 100% 100% 的位置，再往左上方回挪 icon 框 100% 100% 的位置；

這是在我們知道百分比的情況下實(shí)現(xiàn)的效果，而拿到 sprite 圖的時候，我們往往知道的信息如下：

1. 每個 icon 的大小
2. sprite 圖的大小
3. 每個 icon 在 sprite 圖中的定位

這時候我們就需要通過已知的條件計算出定位的百分比，這就變成了一道數(shù)學(xué)題：

已知 icon 寬高都為 50，sprite 寬高都為 200，icon 左上角在 sprite 內(nèi)的坐標(biāo)為 （50， 60），計算其 background-position ；

解：因?yàn)?background-position 定位的概念為 icon 框和 sprite 圖各自指定位置重合；

設(shè)：sprite 寬為 W，高為 H，icon 寬為 w，高為 h，icon 在 sprite 中的坐標(biāo)為 (x,y)，得到百分坐標(biāo)為 (m,n) 故可得到以下公式：

mW-mw=x => m(W-w)=x => m=x/(W-w)*100%

nH-nh=y => n(H-h)=y => n=y/(H-h)*100%

計算可得：

m=50/(200-50)*100%=33.3%

n=60/(200-50)*100%=40%

當(dāng)然，公式是上面那樣，如果寫到 css 中，就需要配合 css 的計算方法 calc() 進(jìn)行計算，如果對 calc 不明確的同學(xué)自行百度一下；如果同學(xué)使用 scss 或者 less 等 css 預(yù)編譯器編寫樣式的就更簡單了，直接寫一個混入方法就搞定；

3、其他方式

每個小圖標(biāo)使用單張圖片，再通過 background-size: cover|100%|contain; 也能完美的顯示，但是一個頁面的圖標(biāo)多的時候，請求就太多了，瀏覽器的并發(fā)請求數(shù)是有限制的，這樣會導(dǎo)致網(wǎng)頁的加載時間大大加長，不劃算；

每個小圖標(biāo)轉(zhuǎn)成 base64 圖片，再直接寫入代碼：

優(yōu)點(diǎn)：1. 完整顯示圖標(biāo)；2. 減少請求數(shù)量；
缺點(diǎn)：1. 色彩豐富的圖片轉(zhuǎn)成 base64 效果不好；2. 會增大圖片提及，相當(dāng)于用下載時間換取請求時間；

好了，這篇分享就說到這里，初次寫文章，語句和方式難免有瑕疵，望各位看客老爺見諒。也希望大家多多支持腳本之家。