响应式设计中的CSS Sprite 过渡

Question

我正在尝试使用 sprite 图像创建一个社交工具栏。当鼠标悬停在“按钮”上时，会发生转换。

我正在使用在 cmsms Simplex 主题中找到的代码；这是示例:http://jsfiddle.net/TtP7K/

CSS 代码:

ul.social {
    padding: 0;
    margin: 0
}

.social li {
    float:left;
    margin: 0;
    padding: 0;
    list-style: none;
    margin-right: 6px
}

.social li a {
    display: block;
    width: 44px;
    height: 44px;
    transition: all 0.2s ease-out;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    text-indent: -999em
}

.social li.facebook a {background: transparent url('http://www.scott-knight.net/facebook-sprite.png') no-repeat 0 0}
.social li.facebook a:hover {background: transparent url('http://www.scott-knight.net/facebook-sprite.png') no-repeat 0 -48px}

html代码:

<ul class="social">
    <li class="facebook"><a title="Facebook" href="https://www.facebook.com/">Facebook</a></li>
</ul>

不幸的是，这个实现没有响应；我已经尝试实现一些解决方法，但到目前为止还没有成功。我正在寻求帮助以找到响应式布局。

提前致谢!

Answer 1

http://jsfiddle.net/coma/Vy4d9/

a.fb {
    font-size: 20px;
    display: block;
    width: 1em;
    height: 1em;
    background: transparent url(http://www.scott-knight.net/facebook-sprite.png) no-repeat 0 0;
    background-size: 100%;
    transition: background-position 250ms;
}

a.fb:hover {
    background-position: 0 -1em;
}

@media screen and (min-width: 300px) {
    a.fb {
        font-size: 24px;
    }
}

@media screen and (min-width: 600px) {
    a.fb {
        font-size: 30px;
    }
}

@media screen and (min-width: 800px) {
    a.fb {
        font-size: 44px;
    }
}