大家都知道在pc端能够使用雪碧图减少小图标的http请求,但是在手机端如何实现呢?
还有除了使用sprite的方法,还有什么其他的方式能够减少大量图片http请求数?
大家都知道在pc端能够使用雪碧图减少小图标的http请求,但是在手机端如何实现呢?
还有除了使用sprite的方法,还有什么其他的方式能够减少大量图片http请求数?
手机端使用css sprite,要实现窗口响应,background-size
使用百分比就行,另外还是建议你使用字体图标吧,现在移动设备显示屏越来越高清了,@2x都不够用了,这里介绍两个字体图标网站给你,希望对你有帮助。
Iconfont:http://www.iconfont.cn/
FontAwesome:http://fortawesome.github.io/Font-Awesome/
就我目前的接触到的来说 spirit 不能响应式布局。所以题主应该是有响应式的要求。那么可以采用字体图标的方式去实现。这样通过控制font-size 就可以控制在不同屏幕大小下的图标大小。同时,字体图标是一次性导入,http请求方面应该是OK的吧。最近也看到篇帖子,内容是响应式图标,很诱人,不过应用还偏窄。 https://icomoon.io/推荐一个字体图标的网站。非常棒,其他的话,慕课网上也有字体图标的相应课程。
CSS Sprite已经过时了,不支持响应式。
优先用字体图标或矢量图形吧
CSS Sprite的好处是制作方便,一些前端构建工具可自动生成Sprite。但很难应用到响应式页面中。
字体图标支持响应式,有很多现成的图标库,但是制作一些个性化的字体图标需要花一些时间。
减小http请求,也可以将一些小图片base64内置。
兼容性不需要低版本PC浏览器的话,可以用纯CSS3图标库。如:
http://www.uiplayground.in/css3-icons/
http://nicolasgallagher.com/pure-css-gui-icons/demo/
http://cssdeck.com/labs/css3-monochrome-icon-set
http://codepen.io/eMaj/pen/joLqt
各种图标库网上很容易找到,个性化要求的只能自己做了 :)
最好还是像楼上说的使用字体图标,但如果真想用sprite,就要改变你的布局方法了,学习淘宝和网易的通过动态设置网页字体大小来使用rem单位。
相关参考:
http://www.codeceo.com/article/font-size-web-design.html
http://segmentfault.com/a/1190000003931773
8 回答4.6k 阅读✓ 已解决
6 回答3.3k 阅读✓ 已解决
5 回答2.8k 阅读✓ 已解决
5 回答6.3k 阅读✓ 已解决
4 回答2.2k 阅读✓ 已解决
5 回答1.3k 阅读✓ 已解决
4 回答2.8k 阅读✓ 已解决
这个跟手机端和PC端是没有关系的,css sprite只是一种优化图片加载的技术,她的原理是注意依靠css的background-position属性。所以你需要关注浏览器是否兼容background-position即可,显然手机端的绝大部分浏览器是支持的。
不过手机端开发中,如果你使用的单位不是px,那在做css sprite时就需要考虑到单位怎么去适配了。