Die min/max-width Medienabfrage macht keinen grammatischen Sinn

Question

Ich finde das Konzept der (Min-Breite/Max-Breite) Medienabfrage ein bisschen verwirrend.

Natürlich, wenn ich eine Medienabfrage zu entwerfen war ich (in Pseudo-Code) sagen wollen würde ....

if(screen.width < 420) 
{ 
    ApplyStyle(); 
} 

Dieses Konzept des Sprechens über min und max keinen Sinn machen, da die 'min-width' von etwas wie einem div-Element ist ein Befehl, keine Frage.

Ich weiß, dass die folgenden Bedingungen erfüllt ist, wenn die LCD-Display unter 420px geht ...

@media screen and (max-width:420px) { 


} 

Ich weiß nur nicht, warum, weil die maximale Breite etwas, das ich ihm sagen zu haben. Wenn ich es gesagt habe, warum überprüft css es? Sicher weiß es es schon.

Ich vermisse vielleicht das grammer/context hier. Kann mir bitte jemand erklären?

Answer 1

min-width in Medien-Anfragen bezieht sich nicht auf die min-width Eigenschaft, die Sie auf Elemente festgelegt, das sind zwei verschiedene Dinge.

In Medienabfragen min-width: X ist wahr, wenn das Ansichtsfenster eine Breite größer oder gleich X hat, effektiv als screen.width >= X funktioniert.Offensichtlich würde max-width dann gleich zu screen.width <= X

Für mich ist es durchaus Sinn macht, wenn Sie @media screen and (max-width:420px) als Bildschirm mit einer maximalen Breite von 420px lesen, also alles von 0 bis 420px

Answer 2

Hier ist ein einfaches Beispiel, hoffentlich hilft es ..

Sagen wir eine Website mit den folgenden Medien-Anfragen haben:

/* #1- Large desktop */ 
@media (min-width: 980px) { ... } 

/* #2- Portrait tablet to landscape and desktop */ 
@media (min-width: 768px) and (max-width: 979px) { ... } 

/* #3- Landscape phone to portrait tablet */ 
@media (max-width: 767px) { ... } 

/* #4- Landscape phones and down */ 
@media (max-width: 480px) { ... } 

Wenn die Bildschirmgröße des Browsers 1200px ist, Abfrage # 1 wird erfüllt sein, da die Mindestbreite des Browsers 980px betragen muss, damit diese Abfrage angezeigt wird.

Lets sagen, dass wir den Browser nun die Größe, und bringen sie den ganzen Weg hinunter zu 250px .. Abfrage # 4 erfüllt ist, wie der MAX 480px ist ..

Hier ist eine einfache Übersetzung der Abfragen ist ..

@media (min-width: 980px) { ... } 

Anzeige, wenn Bildschirm größer oder gleich 980px

@media (min-width: 768px) and (max-width: 979px) { ... } 

Anzeige, wenn Bildschirm größer oder gleich 768px und kleiner als oder gleich 978px

@media (max-width: 767px) { ... } 

Anzeige, wenn der Bildschirm größer als 480px und kleiner oder gleich 767px ist.

@media (max-width: 480px) { ... } 

Anzeige, wenn Bildschirm ist kleiner als oder gleich 480px

diese Abfragen verwenden, werden Sie immer ein Ergebnis haben, wie eine Abfrage immer erfüllt ist.

Answer 3

Die Verwirrung hier ist, dass es sowohl eine min-width CSS-Eigenschaft und Medien-Abfrage mit dem gleichen Namen:

@media (min-width: 420px) {...} /* This is read-only and is set to screen size */ 

.element { min-width: 420px; ...} /* This is setting a property of the selected element */