Is There Any Media Query for Non-Retina Display

Is there any media query for non-retina display?

This article, also on CSS-Tricks, states that you can reverse the logic with not. So in theory:

@media
not screen and (-webkit-min-device-pixel-ratio: 2),
not screen and (   min--moz-device-pixel-ratio: 2),
not screen and (     -o-min-device-pixel-ratio: 2/1),
not screen and (        min-device-pixel-ratio: 2),
not screen and (                min-resolution: 192dpi),
not screen and (                min-resolution: 2dppx) { 

  /* non-Retina-specific stuff here */

}

Media Query for Mobile Devices, but not Retina Display

Your media query has three conditions under which it will perform that CSS; you need to combine these to only capture mobile retina screens. Like so:

@media (max-width : 600px), and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5)


This sets two conditions which both say: "up to a maximum of 600px with a device pixel ratio of 1.5 or greater"

Retina display image resolution using media queries

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.

Do retina devices NEED their own media queries?

No. There is no NEED for retina-specific media queries.

In the modern world you would use vector or font-icons that can be scaled indefinitely without loss of quality. Concerning photos it would be pointless to add different for retina displays.

Your code above is correct. Keep in mind that the rendered resolution is actual device resolution/pixel density. This means that the iphone is 750x1334px with a pixel density 2 (@2x) so the actual rendered resolution is 375x667px.

---

Related Topics