title: Load various set of retina graphics based on screen size
body: <p>My setup is that I have a few versions of a site. On larger screens there is a slide show and on phones and other smaller screens there is just a scroll-through site. These two versions of the site load different graphics.</p>
  
  <p>I've been puzzling over how to conditionally load retina graphics. I need to load the first set of retina graphics for retina devices that have screens big enough for the slide show, but if you're on a phone, the first set should not be loaded, and the second set of retina graphics should overwrite the second set of images used for the scroll-through site.</p>
  
  <p>I'm using this to trigger and replace normal graphics with retina:</p>
  
  <pre><code>@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  </code></pre>
  
  <p>That's at the beginning of my media queries and replaces the images for the desktop site. Then I have a few sections devoted to adjusting layout:</p>
  
  <pre><code>@media all and (min-width: 1024px) and (max-width: 1099px){
  
  @media all and (min-width: 768px) and (max-width: 1023px) {
  
  @media all and (max-width: 767px) {
  // This query is for the small phone sized layout.
  
  @media all and (max-width: 767px) and ((-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)) {
  </code></pre>
  
  <p>That last query is my attempt to swap retina images only for the phone site. This is not working and no arrangement I've tried has worked.</p>
  
  <p>Ideas?</p>
  
  <p>Thanks</p>