Задание @ 3x Retina изображений в CSS

Question

Ранее при использовании различных фоновых изображений для @ 1x и 2x @ в CSS, я сделал что-то вроде этого:

.block { 
    background-image: url(my-image@1x.png); # Standard res. 
} 

@media 
only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and ( min--moz-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) { 

    .block { 
     background-image: url(my-image@2x.png); # Retina. 
     background-size: 100px 100px; 
    } 
} 

или просто:

.block { 
    background-image: url(my-image@1x.png); # Standard res. 
} 

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 

    .block { 
     background-image: url(my-image@2x.png); # Retina. 
     background-size: 100px 100px; 
    } 
} 

(Оба from CSS Tricks, бывший также used in Bootstrap.)

Если я хочу добавить немного для новего @ 3x Retina изображений, я могу видеть, я хотел бы изменить pixel-ratio с до 3, и множества 2dppx до 3dppx, но ... как насчет 192dpi? Я не могу найти ссылку на то, для чего нужно настроить dpi для изображений @ 3x.

Answer 1

CSS пикселей на дюйм установлен на 96, поэтому, если вы нацелены на 3-кратное разрешение, вы должны установить его на (min-resolution: 288dpi).

Теоретически, вы могли бы также использовать image-set, но поддержка довольно плохая AFAIK (только Blink/WebKit, с префиксом webkit).

Но я должен спросить, какой браузер поддерживает только dpi и не поддерживает dppx?