SVG sprite——新的前台图标处理方案

作者 : 开心源码 本文共440个字,预计阅读时间需要2分钟 发布时间: 2022-05-12 共162人阅读

我们在开发前台页面应使用的时候,常常要使用到少量小图标,比方首页、上传、位置、电话、分享,购物车等各式各样的图标。假如每个图标都发送一次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倍屏,按照肯定的比例做大一点,这样在手机上使用才不会发虚。

SVG sprite——新的前台图标处理方案

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » SVG sprite——新的前台图标处理方案

发表回复