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("background@2x.png");
       }
  }
}

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

回答1:

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("background@2x.png");
    }
}

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

来源：https://stackoverflow.com/questions/37504520/retina-display-image-resolution-using-media-queries

标签

css

media-queries

retina-display