84669 orang belajar
152542 orang belajar
20005 orang belajar
5487 orang belajar
7821 orang belajar
359900 orang belajar
3350 orang belajar
180660 orang belajar
48569 orang belajar
18603 orang belajar
40936 orang belajar
1549 orang belajar
1183 orang belajar
32909 orang belajar
大家都知道在pc端能够使用雪碧图减少小图标的http请求,但是在手机端如何实现呢?
还有除了使用sprite的方法,还有什么其他的方式能够减少大量图片http请求数?
欢迎选择我的课程,让我们一起见证您的进步~~
这个跟手机端和PC端是没有关系的,css sprite只是一种优化图片加载的技术,她的原理是注意依靠css的background-position属性。所以你需要关注浏览器是否兼容background-position即可,显然手机端的绝大部分浏览器是支持的。不过手机端开发中,如果你使用的单位不是px,那在做css sprite时就需要考虑到单位怎么去适配了。
手机端使用css sprite,要实现窗口响应,background-size使用百分比就行,另外还是建议你使用字体图标吧,现在移动设备显示屏越来越高清了,@2x都不够用了,这里介绍两个字体图标网站给你,希望对你有帮助。Iconfont:http://www.iconfont.cn/FontAwesome:http://fortawesome.github.io/Font-Awesome/
background-size
这个与手机端和pc端没有关系的。均可以使用雪碧来减少http请求的。不过如果是大量小图标的话,可以使用Font Awesome,一套绝佳的图标字体库和CSS框架。
请参考雅虎优化准则.
一般都用字体图标
还有datauri呀~
就我目前的接触到的来说 spirit 不能响应式布局。所以题主应该是有响应式的要求。那么可以采用字体图标的方式去实现。这样通过控制font-size 就可以控制在不同屏幕大小下的图标大小。同时,字体图标是一次性导入,http请求方面应该是OK的吧。最近也看到篇帖子,内容是响应式图标,很诱人,不过应用还偏窄。 https://icomoon.io/推荐一个字体图标的网站。非常棒,其他的话,慕课网上也有字体图标的相应课程。
使用spdy
使用域名收敛结果: 不会减少总请求量,但是会减少请求的连接数和大大减少请求时间
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-sethttp://codepen.io/eMaj/pen/joLqt
各种图标库网上很容易找到,个性化要求的只能自己做了 :)
如果你用过webpack的话,可以把小图标写成base64的图片。
这个跟手机端和PC端是没有关系的,css sprite只是一种优化图片加载的技术,她的原理是注意依靠css的background-position属性。所以你需要关注浏览器是否兼容background-position即可,显然手机端的绝大部分浏览器是支持的。
不过手机端开发中,如果你使用的单位不是px,那在做css sprite时就需要考虑到单位怎么去适配了。
手机端使用css sprite,要实现窗口响应,
background-size
使用百分比就行,另外还是建议你使用字体图标吧,现在移动设备显示屏越来越高清了,@2x都不够用了,这里介绍两个字体图标网站给你,希望对你有帮助。Iconfont:http://www.iconfont.cn/
FontAwesome:http://fortawesome.github.io/Font-Awesome/
这个与手机端和pc端没有关系的。均可以使用雪碧来减少http请求的。不过如果是大量小图标的话,可以使用Font Awesome,一套绝佳的图标字体库和CSS框架。
请参考雅虎优化准则.
一般都用字体图标
还有datauri呀~
就我目前的接触到的来说 spirit 不能响应式布局。所以题主应该是有响应式的要求。那么可以采用字体图标的方式去实现。这样通过控制font-size 就可以控制在不同屏幕大小下的图标大小。同时,字体图标是一次性导入,http请求方面应该是OK的吧。最近也看到篇帖子,内容是响应式图标,很诱人,不过应用还偏窄。 https://icomoon.io/推荐一个字体图标的网站。非常棒,其他的话,慕课网上也有字体图标的相应课程。
使用spdy
使用域名收敛
结果: 不会减少总请求量,但是会减少请求的连接数和大大减少请求时间
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
各种图标库网上很容易找到,个性化要求的只能自己做了 :)
如果你用过webpack的话,可以把小图标写成base64的图片。