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(logo@2x.png) 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 
  */
}

References:

1. https://css-tricks.com/snippets/css/retina-display-media-query/
2. https://medium.com/@micjamking/hd-retina-display-media-queries-b5562b5430d6