CSS -Medienabfragen
CSS2 eingeführte Medientypen
Die @mediain CSS2 eingeführte Regel ermöglichte es, unterschiedliche Stilregeln für verschiedene Medientypen zu definieren.
Beispiele: Sie könnten einen Satz Stilregeln für Computerbildschirme haben, einen für Drucker, einen für Handheld-Geräte, einen für Fernsehgeräte und so weiter.
Leider haben diese Medientypen außer dem Druckmedientyp nie viel Unterstützung von Geräten erhalten.
CSS3 eingeführte Medienabfragen
Medienabfragen in CSS3 erweiterten die Idee von CSS2-Medientypen: Anstatt nach einem Gerätetyp zu suchen, betrachten sie die Leistungsfähigkeit des Geräts.
Medienabfragen können verwendet werden, um viele Dinge zu überprüfen, wie zum Beispiel:
- Breite und Höhe des Ansichtsfensters
- Breite und Höhe des Geräts
- Ausrichtung (ist das Tablet/Telefon im Quer- oder Hochformat?)
- Auflösung
Die Verwendung von Medienabfragen ist eine beliebte Technik zum Bereitstellen eines maßgeschneiderten Stylesheets für Desktops, Laptops, Tablets und Mobiltelefone (z. B. iPhone und Android-Telefone).
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die @mediaRegel vollständig unterstützt.
| Property | |||||
|---|---|---|---|---|---|
| @media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
Medienabfragesyntax
Eine Medienabfrage besteht aus einem Medientyp und kann einen oder mehrere Ausdrücke enthalten, die entweder wahr oder falsch aufgelöst werden.
@media not|only mediatype and (expressions) {
CSS-Code;
}
Das Ergebnis der Abfrage ist wahr, wenn der angegebene Medientyp mit dem Gerätetyp übereinstimmt, auf dem das Dokument angezeigt wird, und alle Ausdrücke in der Medienabfrage wahr sind. Wenn eine Medienabfrage wahr ist, werden das entsprechende Stylesheet oder die entsprechenden Styleregeln gemäß den normalen Kaskadierungsregeln angewendet.
Sofern Sie nicht die Operatoren not oder only verwenden, ist der Medientyp optional und der
allTyp wird impliziert.
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
| Value | Description |
|---|---|
| all | Used for all media type devices |
| Used for printers | |
| screen | Used for computer screens, tablets, smart-phones etc. |
| speech | Used for screenreaders that "reads" the page out loud |
Einfache Beispiele für Medienabfragen
Eine Möglichkeit, Medienabfragen zu verwenden, besteht darin, einen alternativen CSS-Abschnitt direkt in Ihrem Stylesheet zu haben.
Das folgende Beispiel ändert die Hintergrundfarbe in hellgrün, wenn das Ansichtsfenster 480 Pixel breit oder breiter ist (wenn das Ansichtsfenster kleiner als 480 Pixel ist, ist die Hintergrundfarbe rosa):
Beispiel
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
Das folgende Beispiel zeigt ein Menü, das auf der linken Seite der Seite schwebt, wenn der Darstellungsbereich 480 Pixel breit oder breiter ist (wenn der Darstellungsbereich weniger als 480 Pixel beträgt, befindet sich das Menü über dem Inhalt):
Beispiel
@media screen and (min-width: 480px) {
#leftsidebar
{width: 200px; float: left;}
#main
{margin-left: 216px;}
}
Weitere Beispiele für Medienabfragen
Weitere Beispiele zu Medienabfragen finden Sie auf der nächsten Seite: CSS MQ-Beispiele .
CSS @media-Referenz
Einen vollständigen Überblick über alle Medientypen und Funktionen/Ausdrücke finden Sie in der @media-Regel in unserer CSS-Referenz .