扫码关注官方订阅号
大家都知道在pc端能够使用雪碧图减少小图标的http请求,但是在手机端如何实现呢?
还有除了使用sprite的方法,还有什么其他的方式能够减少大量图片http请求数?
欢迎选择我的课程,让我们一起见证您的进步~~
这个跟手机端和PC端是没有关系的,css sprite只是一种优化图片加载的技术,她的原理是注意依靠css的background-position属性。所以你需要关注浏览器是否兼容background-position即可,显然手机端的绝大部分浏览器是支持的。不过手机端开发中,如果你使用的单位不是px,那在做css sprite时就需要考虑到单位怎么去适配了。
请参考雅虎优化准则.
一般都用字体图标
还有datauri呀~
使用spdy
使用域名收敛结果: 不会减少总请求量,但是会减少请求的连接数和大大减少请求时间
如果你用过webpack的话,可以把小图标写成base64的图片。
字体图标 或 base64;考虑到百分比和相对单位,不建议使用sprite。
把小图标用字体图标icon-font来替代。成熟的字体图标方案有font awesome
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
这个跟手机端和PC端是没有关系的,css sprite只是一种优化图片加载的技术,她的原理是注意依靠css的background-position属性。所以你需要关注浏览器是否兼容background-position即可,显然手机端的绝大部分浏览器是支持的。
不过手机端开发中,如果你使用的单位不是px,那在做css sprite时就需要考虑到单位怎么去适配了。
请参考雅虎优化准则.
一般都用字体图标
还有datauri呀~
使用spdy
使用域名收敛
结果: 不会减少总请求量,但是会减少请求的连接数和大大减少请求时间
如果你用过webpack的话,可以把小图标写成base64的图片。
字体图标 或 base64;考虑到百分比和相对单位,不建议使用sprite。
把小图标用字体图标icon-font来替代。成熟的字体图标方案有font awesome