現在開發移動端 wap 頁面，相信大家都會使用強大的 rem 單位去適配各種機型和螢幕；為了減少網路請求數量，提高網頁訪問效能，一般都會把多個小 icon 合併成一張 sprite 圖，然後根據 background-position 進行定位；但是由於計算機的計算偏差，常常會導致 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 定位，且螢幕單位和倍率都是固定的，所以可以完美的實現雪碧圖效果；
二、移動端
在移動端，由於各種機型的螢幕倍率，使得使用 px 作為單位的佈局會有很大的適配問題，所以現在主流的適配方案就是使用 rem 作單位，並且根據螢幕倍率計算 rem 的基值進行適配；
本人是以寬為 750 的設計稿為基礎，每 1rem 的值為設計稿中 100px 的長度； 由於 icon 的大小尺寸基本一致，故稍微做了點處理，裁切掉了 icon 的透明部分，合成尺寸不統一的 sprite 圖；
1、直接轉換為 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 的偏差，這是由於不同手機計算偏差導致的，如果 icon 較為簡單，可以接受這種效果也沒關係，如果對 icon 顯示的要求較高，則這種方式很明顯不能達到要求；
2、轉換為 rem 後通過 百分比進行定位
首先確認 background-position 使用百分比定位的概念：
屬性值為百分比時，將以指定的點為重合點擺放雪碧圖和顯示 icon 的框。 簡而言之，假設值為 10% 20%，則是將 sprite 圖的 10% 20% 位置的點與顯示框 10% 20% 的點重合（並不是 0% 0% 的點）
舉個栗子：
有一張 200X200 的 sprite 圖，和一個 50X50 的 icon 顯示框，這時如果設定 background-position: 0% 0%;
效果如下：
如果設定 background-position: 100% 100%; ，會先獲取 icon 框 100% 100% 位置的點，和 sprite 圖 100% 100% 位置的點，然後將其重合；
效果如下：
由此可知： 其百分比定位的效果相當於先將 icon 框左上角的位置定位到 sprite 圖 100% 100% 的位置，再往左上方回挪 icon 框 100% 100% 的位置；
這是在我們知道百分比的情況下實現的效果，而拿到 sprite 圖的時候，我們往往知道的資訊如下：
- 每個 icon 的大小
- sprite 圖的大小
- 每個 icon 在 sprite 圖中的定位
這時候我們就需要通過已知的條件計算出定位的百分比，這就變成了一道數學題：
已知 icon 寬高都為 50，sprite 寬高都為 200，icon 左上角在 sprite 內的座標為 （50， 60），計算其 background-position；
解：
因為 background-position 定位的概念為 icon 框和 sprite 圖各自指定位置重合；
設：sprite 寬為 W，高為 H，icon 寬為 w，高為 h，icon 在 sprite 中的座標為 (x,y)，得到百分座標為 (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%
複製程式碼當然，公式是上面那樣，如果寫到 css 中，就需要配合 css 的計算方法 calc() 進行計算，如果對 calc 不明確的同學自行百度一下；如果同學使用 scss 或者 less 等 css 預編譯器編寫樣式的就更簡單了，直接寫一個混入方法就搞定；
3、其他方式
- 每個小圖示使用單張圖片，再通過
background-size: cover|100%|contain;也能完美的顯示，但是一個頁面的圖示多的時候，請求就太多了，瀏覽器的併發請求數是有限制的，這樣會導致網頁的載入時間大大加長，不划算； - 每個小圖示轉成
base64圖片，再直接寫入程式碼：- 優點：1. 完整顯示圖示；2. 減少請求數量；
- 缺點：1. 色彩豐富的圖片轉成
base64效果不好；2. 會增大圖片提及，相當於用下載時間換取請求時間；
好了，這篇分享就說到這裡，初次寫文章，語句和方式難免有瑕疵，望各位看客老爺見諒。