移动端使用雪碧图

---

前言

为了减少网络请求个数量，提高网站的访问速度，我们一般都会把一些小的图片合并成一张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;
}