CSS3 Media Queries

CSS2-Medientypen

@mediaDie Regeln wurden in CSS2 eingeführt und ermöglichen es, unterschiedliche Stilregeln für verschiedene Medientypen anzupassen.

Zum Beispiel: Sie können unterschiedliche Stilregeln für verschiedene Medientypen festlegen (einschließlich Monitore, tragbare Geräte, Fernseher usw.).

Diese Medientypen werden jedoch auf vielen Geräten noch nicht gut unterstützt.

CSS3 Media Queries

CSS3-Media-Queries erben alle Ideen der CSS2-Medientypen: Statt den Gerätetyp nachzuschlagen, zeigt CSS3 adaptiv basierend auf den Einstellungen an.

Mit Media Queries können viele Dinge erkannt werden, zum Beispiel:

  • Die Breite und Höhe des Viewports
  • Gerätebreite und -höhe
  • Orientierung (Smartphone: Querformat, Hochformat).
  • Auflösung

Derzeit verwenden viele Geräte wie iPhones, Android-Telefone, Tablets usw. Media Queries.

Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft unterstützt.

Eigenschaft
@media 21.0 9.0 3.5 4.0 9.0

Media-Query-Syntax

Eine Media Query setzt sich aus mehreren Medientypen zusammen und kann einen oder mehrere Ausdrücke enthalten. Die Ausdrücke geben abhängig davon, ob die Bedingungen erfüllt sind, wahr oder falsch zurück.

@media not|only Medientyp and (Ausdrücke) { CSSCode...;}

Wenn der angegebene Medientyp mit dem Gerätetyp übereinstimmt, gibt die Abfrage true zurück, und das Dokument zeigt die angegebenen Stileffekte auf dem passenden Gerät an.

Sofern Sie nicht die Operatoren not oder only verwenden, passen sich alle Stile an die Anzeigeeffekte auf allen Geräten an.

  • not:not wird verwendet, um bestimmte spezifische Geräte auszuschließen, wie z. B. @media not print (Nicht-Druckgeräte).

  • only:Es wird verwendet, um einen bestimmten Medientyp anzugeben. Bei mobilen Geräten, die Media Queries unterstützen, ignoriert der Webbrowser des mobilen Geräts das Schlüsselwort only, wenn es vorhanden ist, und wendet die Stildatei direkt basierend auf dem folgenden Ausdruck an. Bei Webbrowsern, die Media Queries nicht unterstützen, aber Media Type lesen können, ignorieren sie diese Stildatei, wenn sie auf das Schlüsselwort only stoßen.

  • all:Alle Geräte. Dieses dürfte häufig vorkommen.

Sie können auch verschiedene Stildateien für verschiedene Medien verwenden:

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

CSS3-Medientypen

Wert Beschreibung
all Wird für alle Geräte mit Medientyp verwendet
print Für Drucker
Bildschirm Für Computerbildschirme, Tablets, Smartphones usw.
speech Für Screenreader

Einfache Beispiele für Media Queries

Mit Media Queries können Sie auf bestimmten Geräten entsprechende Stile verwenden, um die ursprünglichen Stile zu ersetzen.

Im folgenden Beispiel wird die Hintergrundfarbe auf Geräten geändert, deren Bildschirm-Viewport-Größe kleiner als 480 Pixel ist:

Beispiel

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

Selbst ausprobieren »

Im folgenden Beispiel floatet das Menü an den linken Rand der Seite, wenn die Bildschirm-Viewport-Größe größer als 480 Pixel ist:

Beispiel

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

Selbst ausprobieren »

Im folgenden Beispiel wird das div-Element ausgeblendet, wenn die Viewport-Größe des Bildschirms kleiner als 600 Pixel ist:

Beispiel

@media screen and (max-width: 600px) { div.example { display: none; } }

Selbst ausprobieren »

CSS3 @media-Referenz

Weitere Informationen zu Media Queries finden Sie unter@mediaRegeln.

Weitere Erweiterungen