利用动态viewport+rem制作一张自适应的svg雪碧图ic

先看下主流浏览器 、手机的尺寸和分辨率

主流浏览器和手机的尺寸

移动端雪碧图的痛点-不能自适应

移动端的icon大小不是不定的，如果用px固定住，在高分辨率手机中就会变得很小在低分辨率手机中就会变得很大。
所以手机都拿icon图标需要用百分比来或者用rem布局来调整icon的大小。

background-position百分比计算公式

x：（容器的宽度-图片的宽度）x (50%)
y：（容器的高度-图片的高度）x (30%)

比如：容器是width：600px；height：600px；而图片是width：200px；height：200px；

.icon{
    width: 600px;
    height: 200px;
    background:#FFF url(image) no-repeat fixed 50% 30%;
}

demosvg.jpg

我把一张图片平均分成11×11的正方形格子，之所以用11×11的正方形格子，
是因为background-position: 0% 0%;是第一个格子,是从零开始计数,所以0%-100%可以平均分成最多11个整数。
当然你可以分成，3×3的格子
0%代表第一个格子
50%代表中间的格子
100%代表最后一个格子

3x3.png

优点

矢量化，文件大小更小，图标更清晰,加载速度更快
支持渐变背景和支持多色彩icon
调用方便

缺点

由于没有svg雪碧图的自动化构建工具，所有的图片都只能人工维护，维护成本有些高。
兼容性不是很好,但是如果你是做移动端，可以不用考虑这个问题。因为大多移动端都支持svg图片。

svg优雅的降级.jpg
关于svg优雅的降级可以查看张鑫旭的这篇博客
http://www.zhangxinxu.com/wordpress/2013/09/svg-fallbacks/

这次分享就到这里，希望对大家有所帮助！