前言
为了减少网络请求个数量，提高网站的访问速度，我们一般都会把一些小的图片合并成一张sprite图，然后根据background-position来进行定位。
在web端，通常先设置好图片的宽高，然后在psd视觉稿上测量出该图标的left 、top值，最后通过设置background-position 属性，就可以成功的显示出该图片。但是在移动端就不一样了，web端的单位统一为px，而移动端的单位为rem，并且各种手机的屏幕大小不一样，很难使用与web端相同的方法。
所以普遍的做法都是使用单张图片，然后使用 background-size: cover|100%|contain 来控制背景图的大小。其实这样会简单得多，但是如果图片太多，网速不好的情况下加载速度就惨不忍睹了。
解决方法
下面提供一个将 px 转化成 rem 的方法：
（1）先设置图标的宽高：
.icon {
width: 0.76rem;
height: 0.76rem;
}
（2）设置 background-size 属性：
查看sprite图的宽高，例如1072px*442p，直接除以100px，把px转化为rem，得到background-size: 10.72rem 4.42rem; 这样sprite图就可以根据font-size进行缩放了。
.icon {
width: 0.76rem;
height: 0.76rem;
background-size: 10.72rem 4.42rem;
}
（3）设置 background-position 属性
在视觉稿上测量出图标的 left, top 值，例如left-top为30px-30px，同样除以100将px转化为rem，得到background-position: 0.3rem 0.3rem，就可以准确的定位到完整的icon了。
.icon {
width: 0.76rem;
height: 0.76rem;
background-size: 10.72rem 4.42rem;
background-position: 0.3rem 0.3rem;
}
