h5在使用雪碧图做背景时，如何使图标等比例缩放大小？

h5页面在使用雪碧图做背景时，其主要利用background-size属性。

首先，h5页面的头部要加上

这段代码可以让网页的宽度自动适应手机屏幕的宽度，禁止用户手动缩放。

属性	备注
width=device-width	表示宽度等于设备屏幕的宽度
initial-scale	表示初始的缩放比例（可以带小数）
maximum-scale	表示最大的缩放比例（可以带小数）
minimum-scale	表示最小的缩放比例（可以带小数）
user-scalable	表示用户是否可以缩放比例（值可以为0，no，yes，其中no和0都为不可以。）

然后，导入你的背景图（注意：要保证你的图标足够大，以免失真）。一般情况下，我们都习惯用标签来设置图标，以下图标都是用i标签来做。

第一步：单位换算（推荐使用rem）

这里简单介绍下px，em，rem

px：绝对长度单位。

em：相对长度单位，

        1.em的值不是固定的，em在body中声明字体大小；

        2.em会继承父级元素的字体大小（参考物是父元素的font-size；）；

       3.em中所有的字体都是相对于父元素的大小决定的；所以如果一个设置了font-size:1.2em的元素在另一个设置了font-size:1.2em的元素里，而这个元素又在另一个设置了font-size:1.2em的元素里，那么最后计算的结果是1.2X1.2X1.2=1.728em

使用时：我们要在body中声明字体大小，eg：body{ font-size:62.5%;}

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

rem：相对长度单位，rem是相对于根元素（html）的大小设定的，因此使用时我们要在html中声明字体大小，如下所示：

		//获取浏览器窗口可见宽度
		var clientWidth = document.documentElement.clientWidth;  
		//换算html中100px=1rem
		document.getElementsByTagName("html")[0].style.fontSize = clientWidth / 750 * 100 + "px" 

html部分如下：

CSS样式如下：

效果图如下所示：

注意：其中background-size设置的大小为背景图的宽高，图标放大或缩小时整体的相关部分同时放大或缩小（相关部分包括背景图的宽高，图标位置，图标的宽高）。