最近开发了一个小项目，其中的小图标，真的不算少。光这些小图标的请求，就把这个项目的性能带动的slow、slow、slow。
所以就想起了雪碧图使用，定位的用法。那么如何来确定这个比例呢？
单位使用rem，假设屏幕宽为375px(iphone6的屏幕宽)为标准。参照淘宝的h5设计尺寸标准，
项目中使用的比例： 比例 = 屏幕宽/ 10 = 375 / 10 = 37.5
所以我们对应的设计稿上的尺寸（如果设计稿尺寸恰好是375），就是使用设计稿中对应的图片尺寸除以拿到的图片原始尺寸。
举个例子：
1. 设计稿中的图片是50*50，而UI给你的图片是52*52的，所以可以知道，我们需要将52*52的图片缩小 52/50 = 1.04 倍。
aB = 52/50 = 1.04;
2. 实际上，我们设计的样式的width和height换算成rem单位的话，就是 50 /37.5 = 1.3333rem(我保留了四位小数)。
img{ 1.3333rem; height: 1.3333rem; }
3. 使用CSS Sprites生产雪碧图。
这里的位置是截屏css cprites工具页面，稍后上传
可以把css代码拷贝出来，里面有对应图片的background-position;
.img{background:url(../images/img.png) no-repeat;background-size:283px 240px}，需要将该行的background-size的px换算成为rem;
以上述为例，383 / 37.5 / aB = 7.2564rem; 240 / 37.5 / aB = 6.1538rem;所以background-size: 7.2564rem 6.1538rem;
background-position:-48px -56px; 根据上面的换算， 48 / 37.5 / aB = 1.2308rem; 56 / 37.5 / aB = 1.4359rem;
所以，background-position: -1.2308rem -1.4359rem;
经过这样，换算后，显示的图片，就会适应自己设置的固定区域了。