雪碧，以迎合多種設備尺寸與媒體查詢個人圖像

Question

我們需要建立一個響應式移動網站，將覆蓋從300寬度到平板電腦高清晰度的尺寸。

我們正在考慮對所有圖標（總共12個圖標）使用精靈來減少圖像大小 - 結合媒體查詢（每個設備縮小3個精靈）。

有沒有人有任何這種方法的經驗，如果可以提供我們可能遇到的任何缺點？

我很擔心舊版Android手機可能會渲染/縮放大精靈？

Answer 1

假設你所描述的三種不同的尺寸，有兩種方式這可以被接近（即我無論如何試過）：

• 樹立精靈包括所有三個圖像尺寸和切換背景位置（使用媒體查詢）。
• 以最大尺寸製作一次精靈，並使用CSS3 background-size屬性來放大/縮小圖像。

我個人傾向於選擇的background-size方法（雖然也傾向於這種與精靈的第二個版本的2倍大小的視網膜圖像組合）。

請記住，背景大小目前沒有完整的覆蓋範圍，但您可以使用正常的三個供應商前綴以及「正常」。例如：

-webkit-background-size: 100px 100px; 
-moz-background-size: 100px 100px; 
-o-background-size: 100px 100px; 
background-size: 100px 100px; 

編號與CSS中其他任何地方的編號相同：寬度，高度。

如果當時就想元素的一半大小，只需將開關尺寸：

-webkit-background-size: 50px 50px; 
-moz-background-size: 50px 50px; 
-o-background-size: 50px 50px; 
background-size: 50px 50px; 

儘管待辦事項，你也必須包括使用在精靈的每個元素新的背景位該視圖的大小。