¿Hay alguna manera de utilizar DPI en consultas de medios css en lugar de px

Question

? El ancho y el alto de píxeles no siempre cuentan toda la historia. Eso funciona muy bien para agregar o eliminar elementos de la pantalla, pero no es lo correcto para configurar la imagen correcta. Con la pantalla Retina en el MBP, una ventana del navegador configurada en la mitad de la pantalla tendría el mismo número de píxeles de ancho que la mayoría de las máquinas actuales. Sin embargo, las imágenes mostradas probablemente serían demasiado pequeñas dado el mayor DPI.

¿Hay alguna manera de cambiar las imágenes basadas en DPI en lugar del número de píxeles de ancho y alto?

Answer 1

puede realizar cualquiera:

<link 
    rel="stylesheet" 
    type="text/css" 
    href="/css/retina.css" 
    media="only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)" 
/> 

o

@media only screen and (-moz-min-device-pixel-ratio: 2), 
     only screen and (-o-min-device-pixel-ratio: 2/1), 
     only screen and (-webkit-min-device-pixel-ratio: 2), 
     only screen and (min-device-pixel-ratio: 2) { 
/*use CSS to swap out your low res images with high res ones here*/ 
} 

Answer 2

Lo que se busca es la proporción de píxeles del dispositivo. Porque cosas como el iPhone se muestran como una pantalla de 320px pero con un diseño de 640 px (proporción de píxeles de 2). En consultas de medios, use "device-pixel-ratio". Aunque me aseguraría de seguir usando los prefijos del vendedor.

un buen puesto en él: http://menacingcloud.com/?c=highPixelDensityDisplays

Answer 3

También hay función <img srcset> y -webkit-image-set css, pero parecen ser apoyado solamente por Safari/Chrome/Opera. Ejemplo:

<img src="image.png" srcset="image-1x.png 1x, 
    image-2x.png 2x, image-3x.png 3x"> 

background-image: -webkit-image-set(
    url(icon1x.jpg) 1x, 
    url(icon2x.jpg) 2x 
); 

No estoy seguro si los ejemplos en la respuesta aceptada por Moin Zaman funcionan en IE/Firefox. Probablemente se necesite "resolución mínima":

@media only screen and (min-resolution: 192dpi), 
     only screen and (min-resolution: 2dppx)