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

一、PC 端

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

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; }

效果

因為其使用 px 定位，且屏幕單位和倍率都是固定的，所以可以完美的實現(xiàn)雪碧圖效果；

二、移動端

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

本人是以寬為 750 的設(shè)計稿為基礎(chǔ)，每 1rem 的值為設(shè)計稿中 100px 的長度； 由于 icon 的大小尺寸基本一致，故稍微做了點處理，裁切掉了 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; }

效果：

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

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

首先確認 background-position 使用百分比定位的概念：

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

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

效果如下：

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

效果如下：

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

這是在我們知道百分比的情況下實現(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 ；

解：因為 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() 進行計算，如果對 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)點：1. 完整顯示圖標(biāo)；2. 減少請求數(shù)量；
缺點：1. 色彩豐富的圖片轉(zhuǎn)成 base64 效果不好；2. 會增大圖片提及，相當(dāng)于用下載時間換取請求時間；

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

最新評論