html - 响应式调整 Sprite 大小

Question

我使用的是:Bootstrap 3.1.1、jQuery 1.11

我想做的是:为各种类别图标使用 sprite 并通过 CSS 定位它。

在 xs 设备(手机)上，我想在每一行保留其中的 3 个，因为我在中小型和大型设备上。

但是，每个图标的大小为 200x200。而且我不确定如何响应地调整像这样的 Sprite 图像的大小。如果我更改#category-icons a.hand-tools 的宽度和高度，它只会显示 Sprite 的一小部分，而不是调整 Sprite 的大小。

Sprite 可以在以下位置找到:http://www.amleo.com/images/art/mobile-category-icons.png

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

当然是寻找最简单可行的解决方案。

JS Fiddle 位于:http://jsfiddle.net/43rxf/

<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;
}

Answer 1

即使没有响应，Sprites 也确实很难维护。

您可以使用这个 plugin制作响应式 Sprite :)