在移動端一個頁面有多個小icon小圖片的情況下，如果用多張圖片來做無疑是增加的頁面加載的時間。為了減少http請求數(shù)，為了提升頁面加載速度，我們建議使用sprite圖，將多張圖片整合成一張圖片，再根據(jù)css的背景
background-position來定位，圖片尺寸如下：

icon-像素.jpg

Html

<div>
  <i class="icon icon1 w1"></i>
  <i class="icon icon2 w2"></i>
  <i class="icon icon3 w2"></i>
  <i class="icon icon4 w2"></i>
  <i class="icon icon5 w2"></i>
  <i class="icon icon6 w2"></i>
  <i class="icon icon7 w3"></i>
  <i class="icon icon8 w3"></i>
  <i class="icon icon9 w4"></i>
  <i class="icon icon10 w4"></i>
  <i class="icon icon11 w4"></i>
  <i class="icon icon12 w4"></i>
</div>

Less

/**
***************這里的 html font-size = window.screen.width/6.4+"px"
***************會影響下面rem的計算，請跟據(jù)自己的實際情況填寫下面的rem
*/
.mixin-box-sizing(@value){
    -webkit-box-sizing: @value;
    -moz-box-sizing: @value;
    -ms-box-sizing: @value;
    -o-box-sizing: @value;
    box-sizing: @value;
}
.icon {
  position: relative;
  display: inline-block;
  background: transparent url(../image/icon.png) 0 0 no-repeat;
  background-size: 6.44rem .8rem; //圖片大小 644px * 80px
  background-repeat: no-repeat;
  background-position: 0 0;
  overflow: hidden;
  .mixin-box-sizing(border-box);
  &.w1 {
    width: .12rem;
    height: .24rem;
  }
  &.w2 {
    width: .44rem;
    height: .44rem;
  }
  &.w3 {
    width: .46rem;
    height: .46rem;
  }
  &.w4 {
    width: .8rem;
    height: .8rem;
  }
}
.icon1{ background-position: 0 0; }
.icon2{ background-position: -0.12rem 0; }
.icon3{ background-position: -0.56rem 0; }
.icon4{ background-position: -1rem 0; }
.icon5{ background-position: -1.44rem 0; }
.icon6{ background-position: -1.88rem 0; }
.icon7{ background-position: -2.32rem 0; }
.icon8{ background-position: -2.78rem 0; }
.icon9{ background-position: -3.24rem 0; }
.icon10{ background-position: -4.04rem 0; }
.icon11{ background-position: -4.84rem 0; }
.icon12{ background-position: -5.64rem 0; }

end------------------------------------