使用媒体查询的视网膜显示图像分辨率 [英] Retina display image resolution using media queries

问题描述

使用媒体查询来检测视网膜显示并指定最大宽度的最佳方法是什么?我可以使用

What is the best way to use media queries to both detect a retina display and also specify max-width? I can detect retina using

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

}

如何将其添加到媒体查询中?我写

How do I add it to the media queries? Do I write

@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("[e-mail]");
       }
  }
}

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

Or is there any better method for changing images for retina displays? ( adding media queries for screen size to media queries for retina display)

推荐答案

您可能会根据

You'd probably cover all retina displays according to this article by CSS-tricks. I guess you already found that out. Another option is to use SVG's, but I wouldn't use them for background images. The SVG format is perfect for two dimensional shapes and icons, altough icon fonts render faster.

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

As for the question "how to add media queries for screen size to media queries for retina display", the code you posted should work fine. Another way would be to just add the second clause to the first ones, like so:

@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("[e-mail]");
    }
}

如果您使用的是SCSS，请按照

If you're using SCSS, create a mixin as explained here. This would save you alot of time and drastically improves readability.

这篇关于使用媒体查询的视网膜显示图像分辨率的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！