CSS: Retina Display Media Query

readme.md

Retina Display Media Query Example:

===

CSS Code for Normal and Retina:

#logo{
    background-image: url(logo.png);
    background-size: 185px 75px;
    background-repeat: no-repeat;
    display: block;
    width: 185px;
    height: 75px;
}

/* Retina Display Media Query */
@media
(-webkit-min-device-pixel-ratio: 1.5),
(   min--moz-device-pixel-ratio: 1.5),
(     -o-min-device-pixel-ratio: 3/2),
(        min-device-pixel-ratio: 1.5),
(                min-resolution: 1.5dppx) {
  #logo  {
    background: url([email protected]) no-repeat center;
    background-size: 185px 75px;
    width: 185px;
    height: 75px;
  }
}

retina.css

@media
(-webkit-min-device-pixel-ratio: 1.5),
(   min--moz-device-pixel-ratio: 1.5),
(     -o-min-device-pixel-ratio: 3/2),
(        min-device-pixel-ratio: 1.5),
(                min-resolution: 1.5dppx) {
  /* 
    CSS FOR RETINA DISPLAY 
  */
}