Warum wird @media außer Kraft gesetzt, obwohl meine maximale Höhe 768 Pixel und nicht 1280 Pixel beträgt?

Question

Meine Monitorauflösung ist 1024 * 768.

Abhängig von der Auflösung, habe ich die Medien in meinem CSS eingestellt, um mein HTML zu vergrößern.

Endlich ist meine Webhintergrundfarbe rot, aber meine maximale Auflösungshöhe ist 768px. Warum wird es von überschrieben (max-Höhe: 1280px)?

Und was muss ich tun, wenn ich mein Web abhängig von der Auflösung vergrößern möchte?

Hier ist meine CSS-Datei:

@media (max-height: 768px) { 
    html { 
     zoom: 100%; 
     background-color: green; 
    } 
} 

@media (max-height: 1280px) { 
    html { 
     zoom: 125%; 
     background-color: red; 
    } 
} 

@media (max-height: 1080px) { 
    .html { 
     zoom: 110%; 
     background-color: yellow; 
    } 
} 

body { 
    height: 100%; 
    position: fixed; 
    width: 100%; 
    user-select: none; 
    -webkit-user-select: none; 
} 

...... 

Answer 1

Da max bedeutet genau das, was es sagt. Anything das passt innerhalb dieser Höhe wird die Regel entsprechen. Ich kann zu den 12 Artikeln oder weniger Kasse im Supermarkt gehen, wenn ich 10 Artikel oder 7 Artikel habe.

Wenn alles andere gleich ist, wird die letzte Regel angewendet.

Setzen Sie die 768px-Regel am Ende, so dass sie die vorherigen überschreiben wird.

Answer 2

Ihre Medienabfrage von max-width 768px wird außer Kraft gesetzt zu werden von 1280px

Answer 3

Sie tun können

@media (max-height: 768px) { 
// Code Here 
} 
@media (min-height: 769px) and (max-height: 1080px) { 
// Code Here 
} 
@media (min-height: 1081px){ 
// Code Here 
} 

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Answer 4

@media (max-height: Xpx) gilt für alles, wo die Höhe des Displays ≤ Xpx.

Wenn Sie also zunächst @media (max-height: 768px) und dannausführen, wird das erwartete Verhalten für beide ausgeführt, wenn die Höhe Ihres Anzeigebereichs ≤ 1280px ist.

Ich glaube, du bist für so etwas gehen:

@media (max-height: 768px) { 
    html { 
     zoom: 100%; 
     background-color: green; 
    } 
} 

@media (min-height: 1081px) and (max-height: 1280px) { 
    html { 
     zoom: 125%; 
     background-color: red; 
    } 
} 

@media (min-height: 769px) and (max-height: 1080px) { 
    .html { 
     zoom: 110%; 
     background-color: yellow; 
    } 
} 

body { 
    height: 100%; 
    position: fixed; 
    width: 100%; 
    user-select: none; 
    -webkit-user-select: none; 
} 

......