Media Query Syntax Issue

Question

Ich bin kein starker Coder und habe ein Problem mit der Syntax von Medienabfragen, bei dem ich wirklich Hilfe gebrauchen könnte. Ich habe eine query specifically for high dpi devices gefunden und möchte sie verwenden, um eine andere Grafik anzuzeigen, wenn die Auflösung der Geräte hoch genug ist. Ich möchte aber auch, dass diese Abfrage nur funktioniert, wenn der Bildschirm unterhalb einer bestimmten maximalen Breite ist, und das ist, was ich Probleme habe, hinzuzufügen. Unten ist, was ich versucht habe (also letzte Zeile wird von mir hinzugefügt), aber es funktioniert nicht. Jede Hilfe wird sehr geschätzt!

@media 
 
    only screen and (-webkit-min-device-pixel-ratio: 1.3), 
 
\t only screen and (-o-min-device-pixel-ratio: 13/10), 
 
\t only screen and (min-resolution: 120dpi), 
 
    and (max-width: 48em)

Answer 1

@media 
only screen and (-webkit-min-device-pixel-ratio: 1.3)  and (max-width: 48em), 
only screen and ( min--moz-device-pixel-ratio: 1.3)  and (max-width: 48em), 
only screen and ( -o-min-device-pixel-ratio: 13/10) and (max-width: 48em), 
only screen and (  min-device-pixel-ratio: 1.3)  and (max-width: 48em), 
only screen and (   min-resolution: 120dpi)  and (max-width: 48em) 
{ 

    /* Bla bla Bla bla**/ 

} 

Answer 2

Im Moment wird (max-width: 48em) in die Liste der Szenarien hinzugefügt, die die Abfrage auslösen.

Sie geben wollen eine Abfrage mit zwei Kriterien pro Szenario wie folgt aus:

@media only screen and (-webkit-min-device-pixel-ratio: 1.3) and (max-width: 48em), 
     only screen and (-o-min-device-pixel-ratio: 13/10) and (max-width: 48em), 
     only screen and (min-resolution: 120dpi) and (max-width: 48em) 
     { 
     // Higher res image here 
     }