@media-запросы для экранов высокой плотности (retina)

При разработке отзывчивых сайтов в CSS используются всеми любимые @media-запросы. В 99% случаев в коде можно увидеть только запросы содержащие min-width, max-width, min-device-width и max-device-width. Иногда попадаются запросы на тип устройства и его положение в пространстве.

С выходом устройст с высокой плотностью экрана, например Retina от Apple, возникала проблема отрисовки некоторых элементов на таких дисплеях. В CSS есть специальный media-query и для этих целей.

Пример для экранов «яблочных устройств»:

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    /* CSS для ретины */
}

Наличие разных браузеров и всякие там префиксы портят все удобство пользования, но есть кросс-браузерный сопособ, тем самым можно задавать специфические стили для почти каждого типа экранов:

/* 1.25 dpr */
@media
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi){
    /* CSS для ретины */
}

/* 1.3 dpr */
@media
(-webkit-min-device-pixel-ratio: 1.3),
(min-resolution: 124.8dpi){
    /* CSS для ретины */
}

/* 1.5 dpr */
@media
(-webkit-min-device-pixel-ratio: 1.5),
(min-resolution: 144dpi){
    /* CSS для ретины */
}

/*2.0 dpr */
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi){
    /* CSS для ретины */
}

Взял отсюда.