Risoluzione dell'immagine dello schermo retina utilizzando le query multimediali

Question

Qual è il modo migliore di utilizzare le query multimediali per rilevare un display retina e specificare anche max-width? posso rilevare retina utilizzando

@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) { 

} 

Come posso aggiungerlo alla query di media? Devo scrivere

@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) { 
@media screen and (max-width: 2000px){ 
    .holer{ 
     background:url("background@2x.png"); 
     } 
    } 
} 

Oppure esiste un metodo migliore per modificare le immagini per i display retina? (aggiungendo le query multimediali per le dimensioni dello schermo alle query multimediali per il display retina)

Answer 1

Probabilmente dovresti coprire tutti i display retina in base all'articolo this tramite trucchi CSS. Immagino che tu l'abbia già scoperto. Un'altra opzione è quella di usare SVG, ma non li userei per le immagini di sfondo. Il formato SVG è perfetto per le forme bidimensionali e le icone, anche se i font delle icone sono più veloci.

Per quanto riguarda la domanda "come aggiungere query multimediali per le dimensioni dello schermo alle query multimediali per la retina display", il codice che hai postato dovrebbe funzionare correttamente. Un altro modo sarebbe quello di aggiungere solo la seconda clausola per i primi, in questo modo:

@media 
only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 2000px), 
only screen and ( min--moz-device-pixel-ratio: 2) and (max-width: 2000px), 
only screen and ( -o-min-device-pixel-ratio: 2/1) and (max-width: 2000px), 
only screen and (  min-device-pixel-ratio: 2) and (max-width: 2000px), 
only screen and (    min-resolution: 192dpi) and (max-width: 2000px), 
only screen and (    min-resolution: 2dppx) and (max-width: 2000px) { 
    .holer { 
     background:url("background@2x.png"); 
    } 
} 

Se stai usando SCSS, creare un mixin come spiegato here. Questo ti farà risparmiare un sacco di tempo e migliora drasticamente la leggibilità.