图标和移动端小问题

1. css+sprite（图片精灵、雪碧图、图片整合）

a)原理：把页面中灵星的小图片整合到一个图片中，再利用css的background-position定位到要显示的位置。

b)特点：可以减少图片的体积和请求次数，通常保存为png-24格式（为了去掉毛边），色彩丰富，维护性差

c)横向排列占的内存要比坚向的少 ，同一色系一起排列比穿插开内存要小。

d) 用的技术 ：background-image  background-position

e)注意：图标大小，图标间距。

2. font+html    http://iconmoon.io/     

字体格式：eot 微软ie专用

                   woff  ie9以上

                   tt  微软和苹果合作开发的

                   svg w3c制定的

 字体图标特点：   1、灵活可以改变样式

                               2、改变图标的大小就象改变字体大小一亲

                              3、图标是矢量的，缩放都不会改变清晰度

                               4、兼容ie css+font ie7以上 html+font ie都支持

用时：1font文件包和字体css放在项目文件里

eg：<span class="icon-camera"></span>（css+font）

        <span class="icon-xxx">&#xe90f</span>（html+font）

3.矢量图标（阿里矢量图标库）

    用的svg

4. 移动端小问题

    1. 用jq做移动端项目点击时会有300ms延迟，它是为了监听是点击事件还是双击事件。

    一般安卓的会有延迟，而苹果的没有。

            解决：fastclick.js 是一个插件。

    2. 移动端加载大图片时会有延迟，一般会用base64进行转码。

    3. 移动端开发有的可能会用zepto。zepto是个精简版的jquery，专门适合移动端开发。

    在zepto中好多jquery中的方法不能用，比如动画，如果想用动画要加在fx插件。