Search code examples
mobilecssmedia-queries

CSS media queries for pixel density: -moz-min-device-pixel-ratio vs. min--moz-device-pixel-ratio


When using CSS media queries for device pixel density, I have seen both -moz-min-device-pixel-ratio and min--moz-device-pixel-ratio.

For example:

@media 
  only screen and (-moz-min-device-pixel-ratio: 1.5) {
  /* styles go here */
}

vs.

@media 
  only screen and (min--moz-device-pixel-ratio: 1.5) {
  /* styles go here*/
}

Which is correct?

Some tutorials/blogs that use the former:

Some tutorials/blogs that use the later, including mozilla.org:


Solution

  • The second one is correct.

    This is from http://www.quirksmode.org/blog/archives/2012/07/vendor_prefixes.html

    -webkit-min-device-pixel-ratio: 1.5
    min--moz-device-pixel-ratio: 1.5
    -o-min-device-pixel-ratio: 3/2