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

一、PC 端

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

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)雪碧圖效果；

二、移動(dòng)端

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

本人是以寬為 750 的設(shè)計(jì)稿為基礎(chǔ)，每 1rem 的值為設(shè)計(jì)稿中 100px 的長(zhǎng)度； 由于 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ì)心留意可以看出，部分地方顯示會(huì)有大概 1px 的偏差，這是由于不同手機(jī)計(jì)算偏差導(dǎo)致的，如果 icon 較為簡(jiǎn)單，可以接受這種效果也沒(méi)關(guān)系，如果對(duì) icon 顯示的要求較高，則這種方式很明顯不能達(dá)到要求；

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

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

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

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

效果如下：

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

效果如下：

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

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

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

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

已知 icon 寬高都為 50，sprite 寬高都為 200，icon 左上角在 sprite 內(nèi)的坐標(biāo)為 （50， 60），計(jì)算其 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%

計(jì)算可得：

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

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

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

3、其他方式

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

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

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

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

最新評(píng)論