CSS Medienabfragen

CSS2 führte Mediengattungen ein

CSS2 führte @media Regeln, die es ermöglichen, unterschiedliche Stilregeln für verschiedene Mediengattungen zu definieren.

Zum Beispiel: Sie könnten eine Gruppe von Stilregeln für Computerbildschirme, eine Gruppe für Drucker, eine Gruppe für Handheld-Geräte und sogar eine Gruppe für Fernseher haben, und so weiter.

Leider wurden diese Mediengerätetypen, mit Ausnahme des Druckmediengerätetyps, nie großflächig von Geräten unterstützt.

CSS3 führt Media Queries ein

Die Media Queries in CSS3 erweitern das Konzept der Mediengerätetypen in CSS2: Sie suchen nicht nach dem Gerätetyp, sondern konzentrieren sich auf die Fähigkeiten des Geräts.

Media Queries können zur Überprüfung vieler Dinge verwendet werden, z.B.:

  • Breite und Höhe des Ansichtsfensters
  • Breite und Höhe des Geräts
  • Richtung (ob das Tablet/Smartphone im Quer- oder Hochformat ist)
  • Auflösung

Die Verwendung von Media Queries ist eine beliebte Technik, um benutzerdefinierte Stilblätter für Desktop-Computer, Laptops, Tablets und Smartphones (z.B. iPhone und Android-Smartphones) bereitzustellen.

Browserunterstützung

Die Zahlen in der Tabelle zeigen die vollständige Unterstützung @media erste Browserversion, die die Regel unterstützt.

Eigenschaft
@media 21.0 9.0 3.5 4.0 9.0

Syntax der Media Queries

Media Queries bestehen aus einem Mediengerätetyp und können eine oder mehrere Ausdrücke enthalten, die als true oder false interpretiert werden können.

@media not|only mediatype and (expressions) {
  CSS-Code;
}

Wenn der angegebene Mediengerätetyp mit dem Gerätetyp des anzeigenden Dokuments übereinstimmt und alle Ausdrücke in der Media Query true sind, wird das Ergebnis der Abfrage auf true gesetzt. Wenn die Media Query true ist, wird das entsprechende Stilblatt oder die Stilerlaubnis angewendet und die normalen Kaskaderegeln befolgt.

Es sei denn, Sie verwenden den Operator not oder only, andernfalls ist der Mediengerätetyp optional und implizit all Typen.

Sie können auch unterschiedliche Stilblätter für verschiedene Medien verwenden:

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

CSS3 Mediengerätetypen

Wert Beschreibung
all Für alle Mediengerätetypen.
print Für Drucker.
screen Für Computerbildschirme, Tablets, Smartphones usw.
speech Für Screenreader, die die Seite laut vorlesen.

Einfaches Beispiel für Media Queries

Eine Methode, um Media Queries zu verwenden, ist die Anwesenheit eines alternativen CSS-Teils im Stilblatt.

Der folgende Beispiel ändert die Hintergrundfarbe auf hellgrün, wenn die Breite des Ansichtsfensters 480 Pixel oder breiter ist (wenn die Breite des Ansichtsfensters weniger als 480 Pixel beträgt, ist die Hintergrundfarbe rosa):

Beispiel

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

Probieren Sie es selbst aus

Der folgende Beispiel zeigt ein Menü, das sich nach links in die Seite bewegt, wenn die Breite des Ansichtsfensters 480 Pixel oder breiter ist (wenn die Breite des Ansichtsfensters weniger als 480 Pixel beträgt, wird das Menü oben auf dem Inhalt positioniert):

Beispiel

@media screen and (min-width: 480px) {
  #leftsidebar {width: 200px; float: left;}
  #main {margin-left: 216px;}
}

Probieren Sie es selbst aus

Mehr Medienabfrage-Beispiele

Für mehr Medienabfrage-Beispiele besuchen Sie die nächste Seite:CSS MQ Beispiel.

CSS @media Referenzhandbuch

Eine vollständige Übersicht über alle Medienarten und Eigenschaften/ Ausdrücke finden Sie in unserer CSS Referenz @media Regel.