title: CSS media queries for pixel density: -moz-min-device-pixel-ratio vs. min--moz-device-pixel-ratio
body: <p>When using CSS media queries for device pixel density, I have seen both <code>-moz-min-device-pixel-ratio</code> and <code>min--moz-device-pixel-ratio</code>.</p>
  
  <p>For example:</p>
  
  <pre><code>@media 
    only screen and (-moz-min-device-pixel-ratio: 1.5) {
    /* styles go here */
  }
  </code></pre>
  
  <p>vs.</p>
  
  <pre><code>@media 
    only screen and (min--moz-device-pixel-ratio: 1.5) {
    /* styles go here*/
  }
  </code></pre>
  
  <p>Which is correct?</p>
  
  <p>Some tutorials/blogs that use the former:</p>
  
  <ul>
  <li><strike><a href="http://menacingcloud.com/?c=highPixelDensityDisplays" rel="noreferrer">http://menacingcloud.com/?c=highPixelDensityDisplays</a></strike></li>
  <li><strike><a href="http://css3.bradshawenterprises.com/blog/retina-image-replacement-for-new-ipad/" rel="noreferrer">http://css3.bradshawenterprises.com/blog/retina-image-replacement-for-new-ipad/</a></strike></li>
  </ul>
  
  <p>Some tutorials/blogs that use the later, including mozilla.org:</p>
  
  <ul>
  <li><a href="http://www.slideshare.net/zomigi/css3-using-media-queries-to-improve-the-web-site-experience" rel="noreferrer">http://www.slideshare.net/zomigi/css3-using-media-queries-to-improve-the-web-site-experience</a></li>
  <li><a href="https://developer.mozilla.org/en/CSS/Media_queries/" rel="noreferrer">https://developer.mozilla.org/en/CSS/Media_queries/</a></li>
  </ul>