7

According to an article on CSS-Tricks, the future proof media queries for retina display can be wrote as:

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

  /* Retina-specific stuff here */

}

What if I want to write CSS codes for non-retina display?

I know you can write some CSS codes for non-retina display first, and then overwrite it for retina display with the above media queries. But is there any media query which is specifically for non-retina display?

Ian Y.
  • 2,293
  • 6
  • 39
  • 55

1 Answers1

9

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 */

}
Galen Gidman
  • 552
  • 3
  • 9