As consultas de mídia de resolução funcionam como consultas de mídia de limite de tamanho (por exemplo, largura máxima), exceto que você está definindo um ponto de interrupção com base em uma densidade de resolução. Isso é extremamente útil quando você precisa fazer com que suas imagens e ícones pareçam nítidos em dispositivos de alta definição e tela Retina. A sintaxe básica é essencialmente a mesma que outras consultas de mídia:
@media only screen and (min-resolution: 200dpi){
/* Resolution-specific CSS & images */
}
</code>
</pre>
For increased specificity for different pixel densities and cross-browser support, utilize the min-device-pixel-ratio properties and dppx (dots per pixel unit) resolution specification:
@media
only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and ( min--moz-device-pixel-ratio: 1.25),
only screen and ( -o-min-device-pixel-ratio: 1.25/1),
only screen and ( min-device-pixel-ratio: 1.25),
only screen and ( min-resolution: 200dpi),
only screen and ( min-resolution: 1.25dppx)
{
/* Resolution-specific CSS & images */
}
</code>
</pre>
Where did I get the resolution (200dpi) and min-device-pixel-ratio (1.25) values?
160dpi is considered the baseline for screen pixel density, since it’s a 1:1 screen-pixel to device-pixel ratio. Apple’s Retina display is a 2:1 screen-pixel to device-pixel ratio, which is about 320 dpi (326ppi to be more accurate). If you only want to target Retina displays, then setting min-device-pixel-ratio: 2 & min-resolution: 192dpi should be fine. However, Android supports a range of different dpi devices, including mdpi (160dpi), hdpi (240dpi), xhdpi (320dpi) and anywhere in between. For example, the new Asus Nexus 7 tablet has a 1280 x 800 HD display at 216dpi. Setting min-device-pixel-ratio: 1.25 & resolution: 200dpi will serve every device with a 25% higher than normal resolution your crisp icons and HD specific CSS (which is the technique I use on this blog).
Background Images & Icons
The trick to serving background images & icons for HD/Retina displays is utilizing the new background-size CSS3 property in your resolution media query. Just set the background-size: property’s value equal to the width of the non-Retina image & you’re all set:
/* Normal Resolution CSS */
.logo{
width: 120px;
background: url(logo.png) no-repeat 0 0;
...
}
/* HD/Retina CSS /
@media
only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and ( min--moz-device-pixel-ratio: 1.25),
only screen and ( -o-min-device-pixel-ratio: 1.25/1),
only screen and ( min-device-pixel-ratio: 1.25),
only screen and ( min-resolution: 200dpi),
only screen and ( min-resolution: 1.25dppx)
{
.logo{
background: url(logo@2x.png) no-repeat 0 0;
background-size: 120px; / Equal to normal logo width */
}
}
</code>
</pre>
Original blog post: http://www.uifuel.com/hd-retina-display-media-queries/