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