title: Retina display image resolution using media queries
body: <p>What is the best way to use media queries to both detect a retina display and also specify <code>max-width</code>? 
  I can detect retina using</p>
  
  <pre><code>@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) { 
  
  }
  </code></pre>
  
  <p>How do I add it to the media queries? Do I write </p>
  
  <pre><code>@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");
         }
    }
  }
  </code></pre>
  
  <p>Or is there any better method for changing images for retina displays? ( adding media queries for screen size to media queries for retina display)</p>