Home  >  Q&A  >  body text

javascript - 手机端怎么减少大量小图标的http请求?(手机端能否使用sprite?)

大家都知道在pc端能够使用雪碧图减少小图标的http请求,但是在手机端如何实现呢?

还有除了使用sprite的方法,还有什么其他的方式能够减少大量图片http请求数?

天蓬老师天蓬老师2750 days ago1128

reply all(13)I'll reply

  • 伊谢尔伦

    伊谢尔伦2017-04-10 16:28:54

    这个跟手机端和PC端是没有关系的,css sprite只是一种优化图片加载的技术,她的原理是注意依靠css的background-position属性。所以你需要关注浏览器是否兼容background-position即可,显然手机端的绝大部分浏览器是支持的。
    不过手机端开发中,如果你使用的单位不是px,那在做css sprite时就需要考虑到单位怎么去适配了。

    reply
    0
  • ringa_lee

    ringa_lee2017-04-10 16:28:54

    手机端使用css sprite,要实现窗口响应,background-size使用百分比就行,另外还是建议你使用字体图标吧,现在移动设备显示屏越来越高清了,@2x都不够用了,这里介绍两个字体图标网站给你,希望对你有帮助。
    Iconfont:http://www.iconfont.cn/
    FontAwesome:http://fortawesome.github.io/Font-Awesome/

    reply
    0
  • 大家讲道理

    大家讲道理2017-04-10 16:28:54

    这个与手机端和pc端没有关系的。均可以使用雪碧来减少http请求的。不过如果是大量小图标的话,可以使用Font Awesome,一套绝佳的图标字体库和CSS框架。

    reply
    0
  • ringa_lee

    ringa_lee2017-04-10 16:28:54

    请参考雅虎优化准则.

    reply
    0
  • 迷茫

    迷茫2017-04-10 16:28:54

    一般都用字体图标

    reply
    0
  • 伊谢尔伦

    伊谢尔伦2017-04-10 16:28:54

    还有datauri呀~

    reply
    0
  • 巴扎黑

    巴扎黑2017-04-10 16:28:54

    就我目前的接触到的来说 spirit 不能响应式布局。所以题主应该是有响应式的要求。那么可以采用字体图标的方式去实现。这样通过控制font-size 就可以控制在不同屏幕大小下的图标大小。同时,字体图标是一次性导入,http请求方面应该是OK的吧。最近也看到篇帖子,内容是响应式图标,很诱人,不过应用还偏窄。 https://icomoon.io/推荐一个字体图标的网站。非常棒,其他的话,慕课网上也有字体图标的相应课程。

    reply
    0
  • 巴扎黑

    巴扎黑2017-04-10 16:28:54

    1. 使用spdy

    2. 使用域名收敛
      结果: 不会减少总请求量,但是会减少请求的连接数和大大减少请求时间

    reply
    0
  • 阿神

    阿神2017-04-10 16:28:54

    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

    各种图标库网上很容易找到,个性化要求的只能自己做了 :)

    reply
    0
  • PHPz

    PHPz2017-04-10 16:28:54

    如果你用过webpack的话,可以把小图标写成base64的图片。

    reply
    0
  • Cancelreply