@media-Abfrage

Lassen Sie uns die reale Verwendung der gesamten @media-Funktionalität betrachten.

<media_type>

Der typischste Wert des Medientyps ist der screen, da wir im Allgemeinen Webseiten für Geräte mit Bildschirmen erstellen. Betrachten wir, wie man es verwendet:

Mit Hilfe dieser Regel haben wir dem Browser mitgeteilt, dass, wenn das Benutzergerät einen Bildschirm hat und seine Breite 768px oder mehr beträgt, dann das Element mit dem Klassennamen container die Eigenschaft background-color mit dem Wert purple hat.

Wir geben die Bildschirmbreite an, für die wir einige CSS-Regeln festlegen möchten. Betrachten wir die folgenden Beispiele:

Im ersten Beispiel haben wir dem Browser mitgeteilt, dass für alle Geräte mit einer Bildschirmbreite von weniger als 1200px oder gleich 1200px die Eigenschaft color mit dem Wert aliceblue auf das Element mit dem Klassennamen container angewendet werden soll.

Im zweiten Beispiel haben wir den Browser darüber informiert, dass, wenn die Bildschirmbreite eines Geräts 1680px überschreitet oder gleich 1680px ist, die Eigenschaft color mit dem Wert gainsboro auf das Element mit dem Klassennamen container angewendet werden soll.

Operatoren sind optional und werden zwischen Medientyp und Medienmerkmal angegeben. and lässt den Browser wissen, dass alle angegebenen Merkmale erfüllt sein müssen.

Diese Regel teilt dem Browser mit, dass das Element mit dem Klassennamen link die Eigenschaft text-decoration mit dem Wert overline nur dann haben muss, wenn der Benutzer ein Gerät mit einem Bildschirm UND die Bildschirmbreite gleich oder größer als 380px UND die Bildschirmbreite gleich oder kleiner als 840px ist.

Durch die Verwendung des , Operators können wir eine Gruppe von Ausdrücken angeben, die, wenn einer von ihnen erfüllt ist, die Ausführung einer Media Query auslösen.

Mit Hilfe dieser Regel haben wir dem Browser mitgeteilt, dass das Element mit dem Klassennamen link die Eigenschaft text-decoration mit dem Wert overline haben muss, wenn die Bildschirmbreite des Benutzers mehr als 960px oder gleich 960px ODER die Bildschirmbreite des Benutzers weniger als 540px oder gleich 540px ist.