css - 使用媒体查询的 Retina 显示图像分辨率

Question

使用媒体查询来检测 Retina 显示器并指定 max-width 的最佳方法是什么？我可以使用

检测视网膜

@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) { 

}

如何将它添加到媒体查询中？我写吗

@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) { 
 @media screen and ( max-width: 2000px){
     .holer{
         background:url("background@2x.png");
       }
  }
}

或者有没有更好的方法来改变视网膜显示器的图像？ (将屏幕尺寸的媒体查询添加到视网膜显示的媒体查询中)

Answer 1

根据 this，您可能会覆盖所有视网膜显示器CSS-tricks 的文章。我想你已经发现了。另一种选择是使用 SVG，但我不会将它们用于背景图像。 SVG 格式非常适合二维形状和图标，尽管图标字体渲染速度更快。

至于“如何将屏幕尺寸的媒体查询添加到视网膜显示的媒体查询”这个问题，您发布的代码应该可以正常工作。另一种方法是将第二个子句添加到第一个子句中，如下所示:

@media
only screen and (-webkit-min-device-pixel-ratio: 2) and ( max-width: 2000px),
only screen and (   min--moz-device-pixel-ratio: 2) and ( max-width: 2000px),
only screen and (     -o-min-device-pixel-ratio: 2/1) and ( max-width: 2000px),
only screen and (        min-device-pixel-ratio: 2) and ( max-width: 2000px),
only screen and (                min-resolution: 192dpi) and ( max-width: 2000px),
only screen and (                min-resolution: 2dppx) and ( max-width: 2000px) { 
    .holer {
        background:url("background@2x.png");
    }
}

如果您使用的是 SCSS，请按照说明创建一个 mixin here .这将为您节省大量时间并显着提高可读性。