C'è un modo per utilizzare DPI nelle query multimediali del css invece di px

Question

Il numero di pixel di larghezza e altezza non sempre racconta l'intera storia. Funziona perfettamente per aggiungere o rimuovere elementi dallo schermo, ma non è giusto per impostare l'immagine giusta. Con il display retina sul MBP, una finestra del browser impostata su metà dello schermo avrebbe lo stesso numero di pixel di larghezza della maggior parte delle macchine oggi. Eppure, le immagini visualizzate sarebbero probabilmente troppo piccole dato il DPI più alto.

C'è un modo per modificare le immagini in base al DPI piuttosto che il numero di pixel di larghezza e altezza?

Answer 1

è possibile effettuare una:

<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

Quello che state cercando è il rapporto Pixel dispositivo. Perché cose come l'iPhone si mostrano come uno schermo da 320px ma con un layout di 640px (Pixel ratio di 2). Nelle query multimediali, utilizza "device-pixel-ratio". Sebbene mi assicurassi di usare ancora i prefissi del venditore.

un buon posto su di esso: http://menacingcloud.com/?c=highPixelDensityDisplays

Answer 3

ci sono anche la funzione <img srcset> e -webkit-image-set css, ma sembrano essere sostenuto solo da Safari/Chrome/Opera. Esempio:

<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 
); 

Non sono sicuro se gli esempi nella risposta accettata da Moin Zaman funzionano su IE/Firefox. Probabilmente è necessario utilizzare una "risoluzione minima":

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