Wie kann ich Medienabfragen mit der Bildschirmauflösung verbinden?

Question

Ich benutze jetzt schon eine Weile Abfragen und schnappte mir einige vorgeladene Breiten usw. je nachdem, welcher Typ es sein wird (Telefon, Laptop, Tablet oder sogar normaler Bildschirm) und ich merkte, dass es minimale Breite und maximale Breite und nichts zu tun hatte mit der Höhe? Also änderte ich es auf maximale Breite, maximale Höhe und jetzt scheint es mit verschiedenen Bildschirmen zu widersprechen. Also habe ich es wieder auf min-width und max width umgestellt, aber das gleiche Problem.

Ich bin völlig verwirrt, wie diese verwendet werden sollen .. Ich sah durch viele Tutorials und alle Arten, aber ich verstehe immer noch nicht richtig. Kann mir jemand helfen?

Unten sind zwei Abfragen, die ich zusammenstellen, dass Konflikte und der Grund, warum ich rate, ist aufgrund der maximalen Breite die gleichen?

Ich änderte eine auf nur maximale Höhe und funktioniert immer noch nicht, also weiß ich ehrlich gesagt nicht.

Die Bildschirmgrößen, für die ich Medienabfragen erstellen möchte, sind die folgenden: 1280 x 768 und ist Landschaft. Ich möchte auch tun: 1280 x 720

Medienabfrage für Bildschirm 1280 x 768:

@media only screen 
    and (min-width: 768px) 
    and (max-width: 1280px) 
    and (orientation: landscape) 
{ 
/*css here*/ 
} 

-Code für Bildschirm 1280 x 720:

@media only screen 
    and (min-width: 720px) 
    and (max-width: 1280px) 
    and (orientation: landscape) 
{ 
/*css here*/ 
} 

Was habe ich versuchen?

Ich habe versucht, die folgenden zu tun, die fehlgeschlagen:

@media only screen 
and (max-height: 720px) 
and (orientation: landscape) 
{ 
/*Screen 1280 x 720*/ 
} 



@media only screen 
and (max-width: 1280px) 
and (orientation: landscape) 
{ 
/*Screen 1280 x 768*/ 
} 

Was mache ich falsch? Ich habe versucht, Höhe nach Breite so max-Breite: 1280 und Max-Höhe: 768 lässt sagen und das gleiche für die anderen Res aber auch nicht aussehen .. Es scheint, als ob der Bildschirm "1280 x 768" die CSS für den Bildschirm " 1280 x 720 "

Alle hilft geschätzt! Vielen Dank.

Answer 1

unerfindlichen Gründen es beide Abfragen Aufnehmen wurde, so dass ich es für beide nur aus arbeiten, indem sie beide passen, egal was auch immer kleiner zu machen, was die Größe war.

Beispiel:

background-color: red; 
height: 500px; // I want this for one red and 1200 for another lets say 

Wenn i Höhe machen 1200 bläst es Anteil aus, aber trotzdem alles, was ich tat, war, lässt sagen, lassen Sie es als 300px Höhe und war großartig. (Nicht das beste, aber ok).

Wenn jemand eine Lösung hat, dann lassen Sie mich bitte wissen, wie bisher ist dies die einzige Möglichkeit und ist nicht die beste (offensichtlich) Lösung aufgrund der Tatsache, nur eine Medienabfrage zu verwenden.

Answer 2

Ihre erste Regel widerspricht Ihrer zweiten Regel.

1280px x 768 ist das gleiche wie w x h. Also wäre die Höhe 768, nicht die minimale Breite - aber das ist nicht nötig.

@media only screen 
    and (min-height: 720px) 
    and (max-width: 1280px) 
    and (orientation: landscape) 
{ 
/*css here*/ 
} 

(Sie können max-height hier verwenden)

@media only screen 
    and (min-height: 768px) 
    and (max-width: 1280px) 
    and (orientation: landscape) 
{ 
/*css here*/ 
}