CSS resize視網膜圖像

Question

我收到了一個網站的設計，分爲三個psd：一個用於桌面，一個用於平板電腦，一個用於智能手機。我正在使所有的事情都對媒體查詢做出反應，並讓所有視網膜都變得有效有一件讓我感到困擾的事情是以下幾點。

因此，比如說，你有一個Facebook鏈接（圖標）的背景圖像。此圖標在桌面psd中爲48x48像素。 96x96px使用下面的CSS，這將自動使視網膜大小：

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { 
    #fb { 
     background: url("../images/fb_2x.png") no-repeat; 
     background-size: 48px 48px; 
     width: 48px; 
     height: 48px; 
    } 
} 

但是，當我看平板電腦和/或智能手機PSD，我注意到，該圖標已經被調整大小以適應設計的其餘部分。該圖標現在是28x28px。我如何定位此圖標的視網膜版本和每個分辨率的大小差異。我想我將我的視網膜媒體查詢CSS更改爲：

#fb { 
    background: url("../images/fb_2x.png") no-repeat; 
    background-size: 28px 28px; 
    width: 28px; 
    height: 28px; 
} 

..但是這意味着所有的視網膜能夠屏幕（也iPad的視網膜和MacBook Pro視網膜）將有28px的那個小圖標大小（儘管視網膜）;但這不是原始大小：它是48x48px。

感謝您的閱讀和建議！

Answer 1

這樣如何循序漸進的方法：

#fb { 
     background: url("../images/fb_28.png") no-repeat; 
     background-size: 100% auto; 
     width: 28px; 
     height: 28px; 
    } 

    /* bigger image for desktop OR high resolution */ 
    @media (min-width: $desktop-size), -webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { 
     #fb { 
     background-image: url("../images/fb_48.png"); 
     } 
    } 

    /* bigger size for desktop */ 
    @media (min-width: $desktop-size) { 
     #fb { 
     width: 48px; 
     height: 48px; 
     } 
    } 

    /* bigger image for high resolution desktop */ 
    @media (min-width: $desktop-size) and (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)) { 
     #fb { 
     background-image: url("../images/fb_96.png"); 
     } 
    }