h5在使用雪碧圖做背景時，如何使圖示等比例縮放大小？
h5頁面在使用雪碧圖做背景時，其主要利用background-size屬性。
首先，h5頁面的頭部要加上
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
這段程式碼可以讓網頁的寬度自動適應手機螢幕的寬度，禁止使用者手動縮放。
| 屬性 | 備註 |
| width=device-width | 表示寬度等於裝置螢幕的寬度 |
| initial-scale | 表示初始的縮放比例（可以帶小數） |
| maximum-scale | 表示最大的縮放比例（可以帶小數） |
| minimum-scale | 表示最小的縮放比例（可以帶小數） |
| user-scalable | 表示使用者是否可以縮放比例（值可以為0，no，yes，其中no和0都為不可以。） |
然後，匯入你的背景圖（注意：要保證你的圖示足夠大，以免失真）。一般情況下，我們都習慣用<i></i>標籤來設定圖示，以下圖示都是用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部分如下：
<section>
<i class="icon icon-editor-normal"></i> <!-- 顯示正常大小圖示 -->
<i class="icon icon-editor-big"></i> <!-- 等比例放大2倍圖示 -->
<i class="icon icon-editord-small"></i> <!-- 等比例縮小2倍圖示 -->
</section>
CSS樣式如下：
<style>
section{
border: 1px solid #eee;
padding: 0.2rem;
}
.icon{
background: url(images/iconbg.png) no-repeat left center;
}
.icon-editor-normal{
display: block;
height: 1.45rem;
width: 1.45rem;
background-position: -1.64rem 0;
background-size: 4rem 2rem;
}
.icon-editor-big{
display: block;
height: 2.9rem;
width: 2.9rem;
background-position: -3.28rem 0;
background-size: 8rem 4rem;
}
.icon-editord-small{
display: block;
height: 0.725rem;
width: 0.725rem;
background-position: -0.82rem 0;
background-size: 2rem 1rem;
}
</style>
效果圖如下所示：
注意：其中background-size設定的大小為背景圖的寬高，圖示放大或縮小時整體的相關部分同時放大或縮小（相關部分包括背景圖的寬高，圖示位置，圖示的寬高）。