我们在开发前端页面应用的时候,常常要用到一些小图标,比如首页、上传、位置、电话、分享,购物车等各式各样的图标。如果每个图标都发送一次http请求的话,这会较大的影响前端性能。通常会将所有图标整合到一起,只占用一个http请求。整合的方式有CSS sprite和iconfont。
CSS sprite的原理其实很简单,就是把所有用到的图标拼接到同一张png图片里,给图标元素设置背景图片,并通过CSS调整元素的background-position属性,使同一张背景图的不同部位在不同的元素中展现。要注意的是,元素的background-size设置的值应该和元素的大小成一定的倍数关系。比如设置了图标元素的宽高是40px,而png里每个图标的大小是80*80,这时候background-size应该是"50% auto"。为什么我们在合并图标的时候要做大一点呢?因为在手机上用,而手机通常是2倍屏、2.5倍屏,甚至3倍屏,按照一定的比例做大一点,这样在手机上用才不会发虚。