響應式設計中的css精靈過渡

Question

我正嘗試使用精靈圖像創建社交工具欄。當鼠標懸停一個「按鈕」時，就會發生轉換。

我正在使用在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; 
    } 
}