CSS调整视网膜图像的大小

Question

我收到了一个网站设计，分为三个 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 的小图标(尽管是视网膜)；但这不是原始尺寸:它是 48x48 像素。

感谢阅读和建议!

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