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

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

icon

 

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

icon2

 

接着写代码,假设我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怎么测量,用工具定位该小图标左上点,距离左边,上边的边界的宽高就是它位移的距离,都是负的,所以上面那样写。
关于如何适配手机端网页以后会说,现在你只需要知道如何做移动端雪碧图就可以了。


本文转载自:

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

展开阅读全文

没有更多推荐了,返回首页