Html 反应性地给精灵定尺寸

我使用的是：bootstrap3.1.1，jquery1.11

我想做的是：使用一个精灵的各种类别图标，并通过CSS定位

在xs设备（手机）上，我希望每行保留其中的3个，就像我在中小型和大型设备上一样

但是，每个图标的大小为200x200。我也不知道如何相应地调整这样的精灵图像的大小。如果我更改#类别图标a.hand-tools width&height，它只显示精灵的一小部分，而不是调整精灵的大小

精灵可在以下位置找到：

有什么想法吗，伙计们？我是否应该使用2个不同的精灵，并在媒体查询中使用下面的CSS来为平板电脑和手机使用不同的精灵？我一点也不确定

当然，在寻找最简单的解决方案

JS小提琴手：

#类别图标a{
背景：url（/images/art/mobile category icons.png）不重复；
右边距：11px；
文本缩进：-9999px；
溢出：隐藏；
显示：内联块；
边缘底部：5px；
-moz转换：所有.2s易用；
-webkit过渡：所有.2s轻松；
-o型过渡：所有。2秒容易；
}
#类别图标a.手动工具{
背景位置：-30px-30px；
高度：200px；
宽度：200px；
边缘顶部：32px；
}

即使没有响应，精灵也很难维护

---

您可以使用此选项来制作响应性精灵：）

我使用背景大小来减小精灵的总体大小，使其适合position@Mr.coder我试过了，但没什么效果。在100%：在700%：它们最终在700%时并排出现，但它们仍然重叠。我一行做了三个图标，你甚至看不到第三个图标。如果你的站点有响应，那么你必须使用单独的图像：如果你使用媒体屏幕来检测屏幕大小的变化，那么你可以为每个div使用单独的图像（这种方法可以工作并节省你的时间）

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
    <a href="/hand-tools/c/P01/" title="Hand Tools" class="hand-tools" target="_blank">Hand Tools</a>
</div>

#category-icons a {
    background: url(/images/art/mobile-category-icons.png) no-repeat;
    margin-right: 11px;
    text-indent: -9999px;
    overflow: hidden;
    display: inline-block;
    margin-bottom: 5px;
    -moz-transition: all .2s ease;
    -webkit-transition: all .2s ease;
    -o-transition: all .2s ease;
}

#category-icons a.hand-tools {
    background-position: -30px -30px;
    height: 200px;
    width: 200px;
    margin-top: 32px;
}