先看下主流浏览器 、手机的尺寸和分辨率
主流浏览器和手机的尺寸
移动端雪碧图的痛点-不能自适应
移动端的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%;
}
我把一张图片平均分成11×11的正方形格子，之所以用11×11的正方形格子，
是因为background-position: 0% 0%;是第一个格子,是从零开始计数,所以0%-100%可以平均分成最多11个整数。
当然你可以分成，3×3的格子
0%代表第一个格子
50%代表中间的格子
100%代表最后一个格子
优点
矢量化，文件大小更小，图标更清晰,加载速度更快
支持渐变背景和支持多色彩icon
调用方便
缺点
由于没有svg雪碧图的自动化构建工具，所有的图片都只能人工维护，维护成本有些高。
兼容性不是很好,但是如果你是做移动端，可以不用考虑这个问题。因为大多移动端都支持svg图片。
关于svg优雅的降级可以查看张鑫旭的这篇博客
这次分享就到这里，希望对大家有所帮助！