Neueste Web-Entwicklung Tutorials
 

CSS Medien-Anfragen

❮ Zurück Weiter Kapitel ❯

CSS2 Eingeführt Medientypen

Die @media Regel eingeführt in CSS2, machte es möglich , verschiedene Stilregeln für verschiedene Medientypen zu definieren.

Beispiele: Sie könnten eine Reihe von Stilregeln für Computer-Bildschirme, eine für Drucker, eine für Handheld-Geräte, eine für TV-ähnliche Geräte, und so weiter.

Leider wurde diese Medientypen nie viel Unterstützung durch Geräte, andere als die Druckmedientyp.

CSS3 Media Queries stellt

Medienanfragen in CSS3 die CSS2 Medientypen Idee erweitern: Statt für eine Art von Gerät zu suchen, schauen sie auf die Fähigkeit des Gerätes.

Medien-Abfragen können verwendet werden, um viele Dinge zu überprüfen, wie zum Beispiel:

  • Breite und Höhe des Darstellungs
  • Breite und Höhe der Vorrichtung
  • Orientierung (ist die Tablette / Telefon in Quer- oder Hochformat?)
  • Lösung

Bei Verwendung von Medien-Abfragen sind eine beliebte Technik für eine maßgeschneiderte Stylesheet zu Tabletten liefern, iPhone und Androids.

Browser-Unterstützung

Die Zahlen in der Tabelle gibt die erste Browser-Version, die die @media Regel voll unterstützt.

Eigentum
@media 21.0 9.0 3.5 4.0 9.0

Medienabfragesyntax

Eine Medien Abfrage besteht aus einer Art Medien und kann einen oder mehrere Ausdrücke enthalten, um entweder die Entschlossenheit wahr oder falsch.

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

Das Ergebnis der Abfrage ist wahr, wenn die angegebene Medientyp den Typ des Geräts passt das Dokument auf und alle Ausdrücke in der Medienabfrage sind wahr angezeigt wird. Wenn ein Medien Abfrage wahr ist, werden die entsprechenden Stylesheet oder Stilregeln, angewendet im Anschluss an die normalen Kaskadierregeln.

Es sei denn , Sie die nicht oder nur Operatoren verwenden, ist der Medientyp optional und all Art wird impliziert werden.

Sie können auch verschiedene Stylesheets für verschiedene Medien haben:

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

CSS3 Medientypen

Wert Beschreibung
all Wird für alle Geräte Medientyp
print Verwendet für Drucker
screen Verwendet für Computer-Bildschirme, Tablets, Smartphones usw.
speech Verwendet für Screenreadern, dass "liest" die Seite laut

Medien-Anfragen Einfache Beispiele

Eine Möglichkeit, Medienanfragen zu verwenden, ist ein alternatives CSS Abschnitt direkt in Ihrem Stylesheet zu haben.

Das folgende Beispiel ändert sich die background-color zu hellgrün , wenn das Ansichtsfenster 480 Pixel breit oder breiter ist (wenn das Ansichtsfenster von weniger als 480 Pixel ist, wird die background-color wird rosa sein):

Beispiel

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

Das folgende Beispiel zeigt ein Menü, das auf der linken Seite der Seite schwimmen, wenn das Ansichtsfenster 480 Pixel breit oder breiter ist (wenn das Ansichtsfenster von weniger als 480 Pixel ist, wird das Menü oben auf den Inhalt sein):

Beispiel

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

CSS3 @media Referenz

Für eine vollständige Übersicht über alle Medientypen und Funktionen / Ausdrücke, schauen Sie bitte auf die @media Regel in unserem CSS Referenz.


❮ Zurück Weiter Kapitel ❯