現在開發移動端 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; } |
