视网膜图像的CSS调整大小

Posted 2023-03-30

【中文标题】视网膜图像的CSS调整大小

【英文标题】：CSS resize for retina images

【发布时间】：2012-11-30 13:44:37

【问题描述】：

我收到了一个网站设计，分为三个 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 视网膜）都将具有 28 像素的小图标大小（尽管视网膜）；但这不是原始尺寸：它是 48x48px。

感谢您的阅读和建议！

【参考方案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");