CSS调整视网膜图像大小

我收到了一个网站的设计，分为三个psd：一个用于桌面，一个用于平板电脑，一个用于智能手机。我正在通过媒体查询让一切都能响应，也让一切都成为视网膜。但有一件事让我感到困扰，那就是以下几点

比如说，你有一个Facebook链接（图标）的背景图像。此图标在桌面psd中为48x48px。这将使用以下css自动使视网膜大小为96x96px：

@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

---

谢谢你的阅读和建议

这种渐进式方法怎么样：

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