现在开发移动端 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; } |
