CSS @media-Regel
Die @media-At-Regel definiert eine Reihe von Stilen, die nur für bestimmte Medientypen gelten.
Media Queries sind eine beliebte Technik, um responsives Webdesign auf Desktop-Computern, Laptops, Tablets und Mobiltelefonen bereitzustellen.
Neben Medientypen gibt es Media Features (Medieneigenschaften), die Namen haben und bestimmte Werte wie CSS-Eigenschaften annehmen. Sie werden jedoch verwendet, um Bedingungen innerhalb von Media Queries zu testen, anstatt Elemente direkt zu stylen.
Media Queries werden verwendet, um Folgendes zu prüfen:
- Breite und Höhe des Viewports
- Ausrichtung
- Auflösung
In JavaScript repräsentiert die CSSMediaRule-Schnittstelle eine einzelne @media-Regel und kann verwendet werden, um mit @media erstellte Regeln abzurufen.
Syntax
CSS @media
@media <media-query> {
/* styles */
}Media Queries können mehrere Bedingungen mit logischen Operatoren kombinieren: and, not, only sowie ein Komma (,).
Beispiel für die @media-Regel:
CSS @media-Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #1c87c9;
}
@media screen and (max-width: 411px) {
body {
background-color: #cce5ff;
}
}
@media screen and (min-width: 768px) {
body {
background-color: #eee;
}
}
@media screen and (max-width: 962px) and (min-width: 450px),
(min-width: 1366px) {
body {
background-color: #333;
}
}
</style>
</head>
<body>
<h2>@media rule example</h2>
<p>Resize the browser to see the effect.</p>
<p>The background color changes based on the viewport width: light blue for screens up to 411px, light gray for 768px and wider, and dark gray for screens between 450px and 962px, or 1366px and wider.</p>
</body>
</html>Ergebnis
Im folgenden Beispiel ändert sich das Erscheinungsbild von <div>, wenn die Browserbreite zwischen 500 und 800 px oder über 1000 px liegt. Passen Sie die Browserfenstergröße an, um den Effekt zu sehen.
Beispiel für die @media-Regel mit geändertem Erscheinungsbild von <div>:
CSS @media-Multiple-Queries-Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #1c87c9;
}
@media screen and (min-width: 200px) {
body {
background-color: #8ebf42;
}
}
@media screen and (min-width: 600px) {
body {
background-color: #ccc;
}
}
@media screen and (max-width: 800px) and (min-width: 500px),
(min-width: 1000px) {
div.box {
font-size: 50px;
padding: 50px;
border: 8px solid #000;
background: #eee;
}
}
</style>
</head>
<body>
<h2>@media rule example</h2>
<p>Media queries set the background-color to grey if the viewport is 600 pixels wide or wider, to green if the viewport is between 200 and 599 pixels wide. If the viewport is smaller than 200 pixels, the background-color is blue.</p>
<h3>Change the appearance of DIV on different screen sizes</h3>
<div class="box">DIV</div>
</body>
</html>Media-Features
| Wert | Beschreibung |
|---|---|
| width | Die Breite des Viewports. |
| height | Die Höhe des Viewports. |
| orientation | Die Ausrichtung des Viewports. |
| aspect-ratio | Das Verhältnis des Werts der Media-Feature „width“ zum Wert der Media-Feature „height“. |
| grid | Prüft, ob das Ausgabegerät raster- oder bitmapbasiert ist. |
| color | Die Anzahl der Bits pro Farbkomponente des Ausgabegeräts. Wenn das Gerät kein Farbgerät ist, beträgt der Wert 0. |
| color-gamut | Der ungefähre Farbumfang, der vom User-Agent und dem Ausgabegerät unterstützt wird. |
| inverted-colors | Prüft, ob der Browser oder das zugrunde liegende Betriebssystem Farben invertiert oder nicht. |
| hover | Prüft, ob das primäre Eingabemedium dem Benutzer ermöglicht, über Elemente zu fahren (Hover). |
| any-hover | Prüft, ob das verfügbare Eingabemedium dem Benutzer ermöglicht, über Elemente zu fahren (Hover). |
| any-pointer | Prüft, ob das verfügbare Eingabemedium ein Zeigegerät ist oder nicht. |
| light-level | Die Lichtverhältnisse in der Umgebung. |
| max-aspect-ratio | Das maximale Verhältnis zwischen Breite und Höhe des Anzeigebereichs. |
| max-color | Die maximale Anzahl der Bits pro Farbkomponente für das Ausgabegerät. |
| max-height | Die maximale Höhe des Anzeigebereichs. |
| max-monochrome | Die maximale Anzahl der Bits pro Farbe auf einem Monochromgerät. |
| max-resolution | Die maximale Auflösung des Geräts. |
| max-width | Die maximale Breite des Anzeigebereichs. |
| min-aspect-ratio | Das minimale Verhältnis zwischen Breite und Höhe des Anzeigebereichs. |
| min-color | Die minimale Anzahl der Bits pro Farbkomponente für das Ausgabegerät. |
| min-height | Die minimale Höhe des Anzeigebereichs. |
| min-monochrome | Die minimale Anzahl der Bits pro Farbe auf einem Monochromgerät. |
| min-resolution | Die minimale Auflösung des Geräts. |
| min-width | Die minimale Breite des Anzeigebereichs. |
| overflow-block | Prüft, wie das Ausgabegerät mit Inhalten umgeht, die den Viewport entlang der Blockachse überlaufen. |
| overflow-inline | Prüft, ob der Inhalt, der den Viewport entlang der Inline-Achse überläuft, gescrollt werden kann oder nicht. |
| pointer | Prüft, ob das primäre Eingabemedium ein Zeigegerät ist oder nicht. |
| resolution | Beschreibt die Auflösung des Ausgabegeräts. |
| scripting | Prüft, ob Skripterstellung verfügbar ist oder nicht. |
| update | Prüft, wie schnell das Ausgabegerät das Erscheinungsbild des Inhalts ändern kann. |
Praxis
Welche Funktionen haben Media Queries in CSS?