Retina Display Media Query for high DPI aware devices. (1.3dpr, 1.5dpr, 2dpr, 3dpr)

media-query-dpi.css

/* Device pixel densities based on:																		               */
/* - Test for CSS by @marcedwards from @bjango                      */
/* (http://bjango.com/articles/min-device-pixel-ratio/)             */
/* - Retina Display Media Query                      		             */
/* (https://css-tricks.com/snippets/css/retina-display-media-query/)*/

/* 1.25 dpr */
@media 
 (-webkit-min-device-pixel-ratio: 1.25), 
 (min-resolution: 120dpi){ 
    
}

/* 1.3 dpr */
@media 
(-webkit-min-device-pixel-ratio: 1.3), 
(min-resolution: 124.8dpi){ 
    /* Retina-specific stuff here */
}

/* 1.5 dpr */
@media 
(-webkit-min-device-pixel-ratio: 1.5), 
(min-resolution: 144dpi){ 
    /* Retina-specific stuff here */
}

/* 2 dpr */
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    /* Retina-specific stuff here */
}

/* 3 dpr For iPhone 6 plus and similar devices */
@media
(-webkit-min-device-pixel-ratio: 3),
(min-resolution: 3dppx), /* Default way */
(min-resolution: 350dpi) /* dppx fallback */ {
    /* Retina-specific stuff here */
}