Wie schreibt man eine CSS-Medienabfrage?

@media-Bildschirm und (min-Breite: 1000px) { }

Dies ist die Syntax einer Medienabfrage. Es beginnt mit @Medien um die Media Query selbst aufzubauen. Legen Sie als Nächstes den Medientyp fest, in diesem Fall Bildschirm. Dieser Typ gilt für Desktop-Computerbildschirme, Tablets, Telefone usw. Beenden Sie die Medienabfrage mit dem Medienfunktion. In unserem obigen Beispiel ist das mittlere Breite: 1000px. Das bedeutet, dass die Media Query bei Displays mit einer Mindestbreite von 1000 Pixeln greift.

Fügen Sie nach diesen Elementen der Medienabfrage eine öffnende und schließende geschweifte Klammer hinzu, ähnlich wie bei jeder normalen CSS-Regel.

Der letzte Schritt zu einer Medienabfrage besteht darin, die CSS-Regeln hinzuzufügen, die angewendet werden sollen, nachdem diese Bedingung erfüllt ist. Fügen Sie diese CSS-Regeln zwischen den geschweiften Klammern ein, aus denen die Medienabfrage besteht, wie folgt:

 @media screen und (min-width: 1000px) { body { font-size: 20px; }

Wenn die Bedingungen der Media Query erfüllt sind (das Browserfenster ist mindestens 1000 Pixel breit), wird dieser CSS-Stil tritt in Kraft und ändert die Schriftgröße unserer Website von den ursprünglich festgelegten 16 Pixeln auf unseren neuen Wert von 20 Zoll Pixel. 
 Hinzufügen weiterer Stile 

Platziere so viele CSS-Regeln innerhalb dieser Media Query nach Bedarf, um das visuelle Erscheinungsbild Ihrer Website anzupassen. Um beispielsweise nicht nur die Schriftgröße auf 20 Pixel zu erhöhen, sondern auch die Farbe aller Absätze in Schwarz (#000000) zu ändern, fügen Sie Folgendes hinzu: 
@media-Bildschirm und (min-Breite: 1000px) {
Körper {
Schriftgröße: 20px;
}
p {
Farbe: #000000;
}
}
 Hinzufügen weiterer Medienabfragen 

Darüber hinaus können Sie für jede größere Größe weitere Media Queries hinzufügen und sie wie folgt in Ihr Stylesheet einfügen: 
@media-Bildschirm und (min-Breite: 1000px) {
Körper {
Schriftgröße: 20px;
}
p {
Farbe: #000000;
{
}
@media-Bildschirm und (min-Breite: 1400px) {
Körper {
Schriftgröße: 24px;
}
}

Die ersten Media Queries starten bei einer Breite von 1000 Pixeln und ändern die Schriftgröße auf 20 Pixel. Sobald der Browser über 1400 Pixel war, änderte sich die Schriftgröße wieder auf 24 Pixel. Fügen Sie so viele Media Queries hinzu, wie Sie für Ihre spezielle Website benötigen. 
 Min-Breite und Max-Breite 

Es gibt im Allgemeinen zwei Möglichkeiten, Media Queries zu schreiben – mit Mindestbreite oder mit maximale Breite. Bisher haben wir min-width in Aktion gesehen. Dieser Ansatz aktiviert Media Queries, nachdem ein Browser mindestens diese Mindestbreite erreicht hat. Also eine Abfrage, die verwendet Mindestbreite: 1000px gilt, wenn der Browser mindestens 1000 Pixel breit ist. Dieser Media Query-Stil wird verwendet, wenn Sie eine Site auf Mobile-First-Art erstellen. 

Wenn du benutzt maximale Breite, es funktioniert in umgekehrter Weise. Nachdem der Browser diese Größe unterschritten hat, gilt eine Media Query von "max-width: 1000px". 

Zitieren Sie diesen Artikel.