移动设备上“精灵图”的制作

“精灵图”简单说来就是把网页中的图标文件合成到一张图片上，目的是每次http请求页面的时候只请求一张图片，不需要对服务器多次请求。

 

这是一张合成好的“精灵图”，其实“精灵图”在pc端做起来没什么好讲的，但是在移动端要注意要给每一个图标预留一点空白位置，因为我们在做移动端适配的时候，获取每一个图标位置都是有小数点的，如果不预留位置则会造成图标显示不全。

 

接着写代码，假设我html设置的font-size是100px，再写移动端 “精灵图”的时候就要先设置整张精灵图片的大小，这样在移动端设备上就会适配

.icon{display: inline-block;background: url(images/icon.png) no-repeat;background-size: 4.56rem;}

因为这张图大小时456*435px，456/100=4.56rem，backgroun-size:一个值；第二个值就是默认的auto,所以上面是那样写的。

.ic18{background-position:-2.11rem -0.83rem;width: 0.77rem;height: 0.74rem;}
.ic19{background-position:-2.87rem -0.83rem;width: 0.75rem;height: 0.74rem;}
.ic20{background-position:-3.61rem -0.83rem;width: 0.71rem;height: 0.74rem;}
.ic21{background-position:-2.64rem -2.24rem;width: 0.8rem;height: 0.68rem;}
.ic22{background-position:-3.43rem -2.24rem;width: 0.71rem;height: 0.68rem;}
.ic23{background-position:-1.99rem -2.24rem;width: 0.66rem;height: 0.68rem;}
.ic24{background-position:0 -3.16rem;width: 0.79rem;height: 0.88rem;}
.ic25{background-position:-0.79rem -3.16rem;width: 0.73rem;height: 0.88rem;}
.ic26{background-position:-1.51rem -3.16rem;width: 0.78rem;height: 0.88rem;}
.ic27{background-position:-2.28rem -3.16rem;width: 0.74rem;height: 0.88rem;}
.ic28{background-position:-3.02rem -3.16rem;width: 0.85rem;height: 0.88rem;}

background-position怎么测量，用工具定位该小图标左上点，距离左边，上边的边界的宽高就是它位移的距离，都是负的，所以上面那样写。
关于如何适配手机端网页以后会说，现在你只需要知道如何做移动端雪碧图就可以了。

本文转载自：

移动设备上“精灵图”的制作