移动端适配之sprites小精灵背景定位

移动端一般都是用rem单位进行适配开发，为了减少http请求我们一般会用到Sprites技术，如果是pc还好，因为pc是固定单位px，所以直接图片+定位就ok了，但是移动端不行啊！ 那咋办呢 。

根据设计图我合并出来的图片长这样，已知图片大小382*158，位置下图所示，那么我们把图片的宽高和小精灵的宽高位置各除2得出下面代码。 大小382x158.png

html部分：

<ul>
        <li class="icon_1"></li>
        <li class="icon_2"></li>
        <li class="icon_3"></li>
</ul>

css部分:

.ul li{
  background: url("https://5iquant-web.oss-cn-hangzhou.aliyuncs.com/Web/Hedge/m_sprites.png");
  -webkit-background-size: rem(191px) rem(79px);
  background-size: rem(191px) rem(79px);
  display: inline-block;
}
.icon_1{
  width: rem(59px);
  height: rem(79px);
  background-position: rem(-5px) rem(-5px);
}
.icon_2{
  width: rem(51px);
  height: rem(58px);
  background-position: rem(-135px) rem(-5px);
}
.icon_3{
  width: rem(51px);
  height: rem(59px);
  background-position: rem(-5px) rem(-5px);
}

一款好用的制作Sprites雪碧图工具:https://www.toptal.com/developers/css/sprite-generator