Con l'avvento dei display Retina anche i CSS devono adeguarsi per fornire stili appropriati ai dispositivi che usano tali display. In tal senso le Media Queries sono lo strumento ideale.
Ecco le queries necessarie al nostro scopo:
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {
/* stili */
}
La sintassi usata prende in considerazione sia le specifiche ufficiali che i prefissi dei browser.