Retina Media Queries

gistfile1.css

/* small screen, 72ppi */
.banner {
  background-image: url(/assets/img/tmp/detail-s.jpg);
}
/* small screen, 192ppi */
@media screen and (max-width: 42.611em) 
       and (-webkit-min-device-pixel-ratio: 2), 
       (min-resolution: 192dppx) {
  .banner {
    background-image: url(/assets/img/tmp/detail-s-2x.jpg);
  }
}

/* medium screen, 72ppi */
@media screen and (min-width: 42.66667em) {
  .banner {
    background-image: url(/assets/img/tmp/detail-m.jpg);
  }
}
/* medium screen, 192ppi */
@media screen and (min-width: 42.66667em) 
       and (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dppx) {
  .banner {
    background-image: url(/assets/img/tmp/detail-m-2x.jpg);
  }
}

/* large screen, 72ppi */
@media screen and (min-width: 55.11111em) {
  .banner {
    background-image: url(/assets/img/tmp/detail-l.jpg);
  }
}
/* large screen, 192ppi */
@media screen and (min-width: 55.11111em) 
       and (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dppx) {
  .banner {
    background-image: url(/assets/img/tmp/detail-l-2x.jpg);
  }
}