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"></span>(html+font)
3.矢量图标(阿里矢量图标库)
用的svg
4. 移动端小问题
1. 用jq做移动端项目点击时会有300ms延迟,它是为了监听是点击事件还是双击事件。
一般安卓的会有延迟,而苹果的没有。
解决:fastclick.js 是一个插件。
2. 移动端加载大图片时会有延迟,一般会用base64进行转码。
3. 移动端开发有的可能会用zepto。zepto是个精简版的jquery,专门适合移动端开发。
在zepto中好多jquery中的方法不能用,比如动画,如果想用动画要加在fx插件。