CSS- @media- Regel
Beispiel
Ändern Sie die Hintergrundfarbe des <body>-Elements in „hellblau“, wenn das Browserfenster 600 Pixel breit oder weniger ist:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Die @mediaRegel wird in Medienabfragen verwendet, um verschiedene Stile für verschiedene Medientypen/Geräte anzuwenden.
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 zur Bereitstellung eines maßgeschneiderten Stylesheets (responsives Webdesign) für Desktops, Laptops, Tablets und Mobiltelefone.
Sie können auch Medienabfragen verwenden, um anzugeben, dass bestimmte Stile nur für gedruckte Dokumente oder für Bildschirmleseprogramme gelten (Medientyp: Druck, Bildschirm oder Sprache).
Neben Medientypen gibt es auch Medienfunktionen. Medienfunktionen bieten spezifischere Details für Medienabfragen, indem sie es ermöglichen, auf eine bestimmte Funktion des Benutzeragenten oder Anzeigegeräts zu testen. Beispielsweise können Sie Stile nur auf die Bildschirme anwenden, die größer oder kleiner als eine bestimmte Breite sind.
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die @media-Regel vollständig unterstützt.
| Property | |||||
|---|---|---|---|---|---|
| @media | 21 | 9 | 3.5 | 4.0 | 9 |
CSS-Syntax
@media not|only mediatype and (mediafeature and|or|not
mediafeature) {
CSS-Code;
}
Bedeutung der Schlüsselwörter not , only and und :
not: Das Schlüsselwort not kehrt die Bedeutung einer ganzen Medienanfrage um.
only: Das only-Schlüsselwort verhindert, dass ältere Browser, die Medienabfragen mit Medienfunktionen nicht unterstützen, die angegebenen Stile anwenden. Es hat keine Auswirkungen auf moderne Browser.
and: Das Schlüsselwort and kombiniert eine Medienfunktion mit einem Medientyp oder anderen Medienfunktionen.
Sie sind alle optional. Wenn Sie jedoch nicht oder nur verwenden , müssen Sie auch einen Medientyp angeben.
Sie können auch verschiedene Stylesheets für verschiedene Medien haben, wie hier:
<link rel="stylesheet" media="screen and (min-width:
900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width:
600px)" href="smallscreen.css">
....
Medientypen
| Value | Description |
|---|---|
| all | Default. 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 |
Medienfunktionen
| Value | Description |
|---|---|
| any-hover | Does any available input mechanism allow the user to hover over elements? (added in Media Queries Level 4) |
| any-pointer | Is any available input mechanism a pointing device, and if so, how accurate is it? (added in Media Queries Level 4) |
| aspect-ratio | The ratio between the width and the height of the viewport |
| color | The number of bits per color component for the output device |
| color-gamut | The approximate range of colors that are supported by the user agent and output device (added in Media Queries Level 4) |
| color-index | The number of colors the device can display |
| grid | Whether the device is a grid or bitmap |
| height | The viewport height |
| hover | Does the primary input mechanism allow the user to hover over elements? (added in Media Queries Level 4) |
| inverted-colors | Is the browser or underlying OS inverting colors? (added in Media Queries Level 4) |
| light-level | Current ambient light level (added in Media Queries Level 4) |
| max-aspect-ratio | The maximum ratio between the width and the height of the display area |
| max-color | The maximum number of bits per color component for the output device |
| max-color-index | The maximum number of colors the device can display |
| max-height | The maximum height of the display area, such as a browser window |
| max-monochrome | The maximum number of bits per "color" on a monochrome (greyscale) device |
| max-resolution | The maximum resolution of the device, using dpi or dpcm |
| max-width | The maximum width of the display area, such as a browser window |
| min-aspect-ratio | The minimum ratio between the width and the height of the display area |
| min-color | The minimum number of bits per color component for the output device |
| min-color-index | The minimum number of colors the device can display |
| min-height | The minimum height of the display area, such as a browser window |
| min-monochrome | The minimum number of bits per "color" on a monochrome (greyscale) device |
| min-resolution | The minimum resolution of the device, using dpi or dpcm |
| min-width | The minimum width of the display area, such as a browser window |
| monochrome | The number of bits per "color" on a monochrome (greyscale) device |
| orientation | The orientation of the viewport (landscape or portrait mode) |
| overflow-block | How does the output device handle content that overflows the viewport along the block axis (added in Media Queries Level 4) |
| overflow-inline | Can content that overflows the viewport along the inline axis be scrolled (added in Media Queries Level 4) |
| pointer | Is the primary input mechanism a pointing device, and if so, how accurate is it? (added in Media Queries Level 4) |
| resolution | The resolution of the output device, using dpi or dpcm |
| scan | The scanning process of the output device |
| scripting | Is scripting (e.g. JavaScript) available? (added in Media Queries Level 4) |
| update | How quickly can the output device modify the appearance of the content (added in Media Queries Level 4) |
| width | The viewport width |
Mehr Beispiele
Beispiel
Blenden Sie ein Element aus, wenn die Breite des Browsers 600 Pixel oder weniger beträgt:
@media screen and (max-width: 600px) {
div.example {
display:
none;
}
}
Beispiel
Verwenden Sie Medienabfragen, um die Hintergrundfarbe auf Lavendel festzulegen, wenn das Ansichtsfenster 800 Pixel breit oder breiter ist, und auf Hellgrün, wenn das Ansichtsfenster zwischen 400 und 799 Pixel breit ist. Wenn der Viewport kleiner als 400 Pixel ist, ist die Hintergrundfarbe hellblau:
body {
background-color: lightblue;
}
@media screen and (min-width:
400px) {
body {
background-color: lightgreen;
}
}
@media
screen and (min-width: 800px) {
body {
background-color: lavender;
}
}
Beispiel
Erstellen Sie ein ansprechendes Navigationsmenü (das auf großen Bildschirmen horizontal und auf kleinen Bildschirmen vertikal angezeigt wird):
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}
Beispiel
Verwenden Sie Medienabfragen, um ein ansprechendes Spaltenlayout zu erstellen:
/* On screens that are 992px wide or less, go from four columns to two
columns */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* On screens that are 600px wide or less, make the columns stack
on top of each other instead of next to each other */
@media screen and (max-width:
600px) {
.column {
width: 100%;
}
}
Beispiel
Verwenden Sie Medienabfragen, um eine responsive Website zu erstellen:
Beispiel
Medienabfragen können auch verwendet werden, um das Layout einer Seite abhängig von der Ausrichtung des Browsers zu ändern. Sie können eine Reihe von CSS-Eigenschaften haben, die nur gelten, wenn das Browserfenster breiter als seine Höhe ist, eine sogenannte "Querformat"-Ausrichtung.
Verwenden Sie eine hellblaue Hintergrundfarbe, wenn die Ausrichtung im Querformat ist:
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
}
Beispiel
Verwenden Sie mediaqueries, um die Textfarbe auf Grün zu setzen, wenn das Dokument auf dem Bildschirm angezeigt wird, und auf Schwarz, wenn es gedruckt wird:
@media screen {
body {
color: green;
}
}
@media print {
body {
color: black;
}
}
Beispiel
Kommagetrennte Liste : Fügen Sie eine zusätzliche Medienabfrage zu einer bereits vorhandenen hinzu, indem Sie ein Komma verwenden (dies verhält sich wie ein ODER-Operator):
/* When the width is between 600px and 900px OR above 1100px - change the
appearance of <div> */
@media screen and (max-width: 900px) and
(min-width: 600px), (min-width: 1100px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
Verwandte Seiten
CSS-Tutorial: CSS-Medienabfragen
CSS-Tutorial: Beispiele für CSS-Medienabfragen
RWD-Tutorial: Responsives Webdesign mit Medienabfragen
JavaScript-Tutorial: Die Methode window.matchMedia()