Die in CSS2 eingeführte Regel @media
ermöglichte die Definition verschiedener Stilregeln für verschiedene Medientypen.
Beispiele: Sie könnten einen Satz Stilregeln für Computerbildschirme haben, einen für Drucker, einer für Handgeräte, einer für Fernsehgeräte usw.
Leider wurden diese Medientypen von anderen Geräten nie umfassend unterstützt als der Druckmedientyp.
Medienabfragen in CSS3 erweiterten die Idee der CSS2-Medientypen: Anstatt nach einem Gerätetyp zu suchen, Sie betrachten die Leistungsfähigkeit des Gerät.
Mit Medienabfragen können viele Dinge überprüft werden, wie zum Beispiel:
Breite und Höhe des Ansichtsfensters
Breite und Höhe des Geräts
Ausrichtung (befindet sich das Tablet/Telefon im Quer- oder Hochformat?)
Auflösung
Die Verwendung von Medienabfragen ist eine beliebte Technik zur Bereitstellung eines maßgeschneiderten Stils Blatt auf Desktops, Laptops, Tablets und Mobiltelefone (z. B. iPhone und Android-Telefone).
Die Zahlen in der Tabelle geben die erste Browserversion an, die die @media
-Regel vollständig unterstützt.
Property | |||||
---|---|---|---|---|---|
@media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
Eine Medienabfrage besteht aus einem Medientyp und kann einen oder mehrere enthalten Ausdrücke, die entweder wahr oder falsch aufgelöst werden.
@media not|only mediatype and (expressions) {
CSS-Code;
}
Das Ergebnis der Abfrage ist true, wenn der angegebene Medientyp mit dem Gerätetyp des Dokuments übereinstimmt angezeigt wird und alle Ausdrücke in der Medienabfrage wahr sind. Wenn eine Medienabfrage wahr ist, gilt dies auch für das entsprechende Stylesheet oder die entsprechenden Stilregeln angewendet und folgt dabei den normalen Kaskadenregeln.
Sofern Sie nicht die Operatoren „not“ oder „only“ verwenden, ist der Medientyp optional und der Der Typ alle
wird impliziert.
Sie können auch unterschiedliche Stylesheets für unterschiedliche Medien verwenden:
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">
Wird für alle Medientypgeräte verwendet
Wird für Drucker verwendet
Wird für Computerbildschirme, Tablets, Smartphones usw. verwendet.
Wird für Screenreader verwendet, die die Seite laut vorlesen
Eine Möglichkeit, Medienabfragen zu verwenden, besteht darin, direkt in Ihrem Stylesheet einen alternativen CSS-Abschnitt zu haben.
Das folgende Beispiel ändert die Hintergrundfarbe in Hellgrün, wenn die Das Ansichtsfenster ist 480 Pixel breit oder breiter (wenn das Ansichtsfenster kleiner als ist). 480 Pixel, die Hintergrundfarbe ist rosa):
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: pink;
}
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
<h1>Resize the browser window to see the effect!</h1>
<p>The media query will only apply if the media type is screen and the viewport is 480px wide or wider.</p>
</body>
</html>
Das folgende Beispiel zeigt ein Menü, das links auf der Seite angezeigt wird, wenn Das Ansichtsfenster ist 480 Pixel breit oder breiter (wenn das Ansichtsfenster kleiner als ist). 480 Pixel, das Menü wird über dem Inhalt angezeigt):
@media screen and (min-width: 480px) {
#leftsidebar
{width: 200px; float: left;}
#main
{margin-left: 216px;}
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.wrapper {overflow: auto;}
#main {margin-left: 4px;}
#leftsidebar {
float: none;
width: auto;
}
#menulist {
margin: 0;
padding: 0;
}
.menuitem {
background: #CDF0F6;
border: 1px solid #d4d4d4;
border-radius: 4px;
list-style-type: none;
margin: 4px;
padding: 2px;
}
@media screen and (min-width: 480px) {
#leftsidebar {width: 200px; float: left;}
#main {margin-left: 216px;}
}
</style>
</head>
<body>
<div class="wrapper">
<div id="leftsidebar">
<ul id="menulist">
<li class="menuitem">Menu-item 1</li>
<li class="menuitem">Menu-item 2</li>
<li class="menuitem">Menu-item 3</li>
<li class="menuitem">Menu-item 4</li>
<li class="menuitem">Menu-item 5</li>
</ul>
</div>
<div id="main">
<h1>Resize the browser window to see the effect!</h1>
<p>This example shows a menu that will float to the left of the page if the viewport is 480 pixels wide or wider. If the viewport is less than 480 pixels, the menu will be on top of the content.</p>
</div>
</div>
</body>
</html>
Weitere Beispiele zu Medienabfragen finden Sie auf der nächsten Seite: CSS MQ-Beispiele.
Eine vollständige Übersicht über alle Medientypen und Funktionen/Ausdrücke finden Sie unter @media-Regel in unserer CSS-Referenz.