Eine Zusammenfassung aller Möglichkeiten, wie du mit Medienfunktionen auf Geräte und Einstellungen.
Responsives Webdesign wäre ohne Medienabfragen nicht möglich. Vor Medienabfragen konnten wir nicht herausfinden, mit welcher Art von Gerät die Nutzer Ihre Website besucht haben. Designschaffende mussten Annahmen treffen. Diese Annahmen wurden in Designs mit fester Breite oder in flüssige Layouts codiert.
Das änderte sich mit der Einführung von Medienabfragen. Zum ersten Mal konnten Designschaffende Menschen auf halber Strecke treffen. Designschaffende könnten ihre Layouts an die Geräte der Nutzer anpassen.
Eine Medienabfrage umfasst einen optionalen Medientyp und eine obligatorische Medienfunktion. Die Medientypen haben sich in den letzten Jahren kaum verändert. Es gibt immer noch vier mögliche Werte:
@media all
@media screen
@media print
@media speech
Medienfunktionen wurden hingegen stark erweitert. Designschaffende können Nutzende jetzt mehr als zur Hälfte kennenlernen und Designs an weit mehr als nur eine Bildschirmgröße anpassen.
Unterstützte Browser
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Dimensionen des Darstellungsbereichs
Die bei Weitem beliebtesten Medienabfragen im Web sind diejenigen, die sich auf die Breite des Darstellungsbereichs beziehen. Aber auch hier haben Sie die Wahl. Mit der Medienfunktion max-width
können Sie Stile unter einer bestimmten Breite oder mit der Medienfunktion min-width
Stile über eine bestimmte Breite anwenden.
main {
display: grid;
grid-template-columns: 2fr 1fr;
}
@media (max-width: 45em) {
main {
display: block;
}
}
@media (min-width: 45em) {
main {
display: grid;
grid-template-columns: 2fr 1fr;
}
}
Ich persönlich nutze min-width
gerne. Ich wende Layoutstile additiv an. Ich führe an jedem Haltepunkt neue Layoutregeln ein, anstatt vorherige Regeln rückgängig zu machen.
Dieser additive Ansatz eignet sich auch für die Höhe. Mit min-height
können Sie weitere Regeln einführen, sobald mehr Höhe des Darstellungsbereichs verfügbar ist. Angenommen, Sie haben ein Kopfzeilenelement, das Sie oben im Browserfenster verankern möchten, wenn es genügend vertikalen Platz gibt.
@media (min-height: 30em) {
header {
position: fixed;
}
}
Wenn Sie möchten, können Sie aber auch die Medienfunktion „max-height
“ verwenden. Hier ist die Überschrift standardmäßig verankert, aber die Fixierung wird entfernt, wenn nicht genügend vertikaler Platz vorhanden ist.
header {
position: fixed;
}
@media (max-height: 30em) {
header {
position: static;
}
}
Die Auswahl zwischen Präfixen min-
und max-
gilt nicht nur für width
und height
. Diese Option bietet die Medienfunktion aspect-ratio
. Sie bietet auch eine Version ohne Präfix, wenn Sie Stile mit einem exakten Verhältnis von Breite zu Höhe anwenden möchten.
@media (min-aspect-ratio: 16/9) {
// The ratio of width to height is at least 16 by 9.
}
@media (max-aspect-ratio: 16/9) {
// The ratio of width to height is less than 16 by 9.
}
@media (aspect-ratio: 16/9) {
// The ratio of width to height is exactly 16 by 9.
}
Die Bereitstellung verschiedener Stile für unterschiedliche Seitenverhältnisse könnte schnell aus dem Ruder geraten. Wenn Sie diese Einstellung nicht benötigen, ist die Medienfunktion orientation
möglicherweise besser für Sie geeignet. Es gibt zwei mögliche Werte: portrait
oder landscape
.
@media (orientation: portrait) {
// The width is less than the height.
}
@media (orientation: landscape) {
// The width is greater than the height.
}
Auch wenn die Begriffe „Hochformat“ und "Querformat" werden am häufigsten verwendet, um sich auf die Ausrichtung von Mobilgeräten zu beziehen. Die Medienfunktion orientation
ist nicht gerätespezifisch. Ein Vollbild-Browserfenster auf einem typischen Laptop hat den orientation
-Wert landscape
.
Displays
Verschiedene Displays haben unterschiedliche Pixeldichten, gemessen in dpi
(Punkte pro Zoll). Mit der Medienfunktion resolution
können Sie die Stile für verschiedene Pixeldichten anpassen. Wie bei aspect-ratio
gibt es auch für resolution
drei Varianten: minimal, maximal und genau.
@media (min-resolution: 300dpi) {
// The display has a pixel density of at least 300 dots per inch.
}
@media (max-resolution: 300dpi) {
// The display has a pixel density less than 300 dots per inch.
}
@media (resolution: 300dpi) {
// The display has a pixel density of exactly 300 dots per inch.
}
Sie müssen möglicherweise nie resolution
-Medienabfragen verwenden. Die Pixeldichte stellt normalerweise nur ein Problem bei Bildern dar. Mit responsiven Bildern kann die Pixeldichte direkt in HTML verarbeitet werden.
In CSS hingegen definieren Sie Ihre Animationen und Übergänge. Mit der Medienfunktion update
können Sie diese Animationen und Übergänge so anpassen, dass sie auf unterschiedliche Aktualisierungsraten reagieren. Diese Medienfunktion meldet einen von drei Werten: none
, slow
und fast
.
Der Wert für update
none
bedeutet, dass keine Aktualisierungsrate vorhanden ist. Eine gedruckte Seite kann beispielsweise nicht aktualisiert werden.
Der Wert für update
slow
bedeutet, dass die Anzeige nicht schnell aktualisiert werden kann. Ein E-Ink-Display ist ein Beispiel für einen Bildschirm mit einer langsamen Aktualisierungsrate.
Ein update
-Wert von fast
bedeutet, dass die Anzeige schnell genug aktualisiert wird, um Animationen und Übergänge zu verarbeiten.
@media (update: fast) {
a {
transition-duration: 0.4s;
transition-property: transform;
}
a:hover {
transform: scale(150%);
}
}
Nicht alle Aspekte des Displays beziehen sich auf die Hardwarefunktionen. Im Modul zu Designs haben Sie gesehen, wie Properties in einer Web-App-Manifestdatei definiert werden. Eines dieser Attribute heißt display
und Sie können ihm den Wert fullscreen
, standalone
, minimum-ui
oder browser
zuweisen. Mit der entsprechenden Medienfunktion display-mode
können Sie Ihre Designs an diese Optionen anpassen.
Angenommen, Sie haben in Ihrem Web-App-Manifest den display
-Wert standalone
angegeben. Wenn ein Nutzer Ihre Website zu seinem Startbildschirm hinzufügt, wird sie ohne Browseroberfläche gestartet. Sie könnten sich dafür entscheiden, diesen Nutzenden eine Zurück-Schaltfläche anzuzeigen.
button.back {
display: none;
}
@media (display-mode: standalone) {
button.back {
display: inline;
}
}
Farbe
Es gibt zahlreiche Medienfunktionen für die Abfrage der Farbfunktionen eines Geräts. Wenn Sie Ihre Stile für eine Anzeige anpassen möchten, die nur Grautöne ausgibt, können Sie die Medienfunktion monochrome
ohne Wert verwenden.
@media (monochrome) {
body {
color: black;
background-color: white;
}
}
Es gibt eine entsprechende Medienfunktion color
.
@media (color) {
body {
color: maroon;
background-color: linen;
}
}
Für Farbbildschirme können Sie Abfragen mit den Medienfunktionen color-gamut
, color-index
oder dynamic-range
schreiben. Alle Berichte enthalten spezifische Details zu den Farbfunktionen des Bildschirms.
In diesem Beispiel werden die Farbwerte als Reaktion auf die Medienfunktion „dynamic-range
“ aktualisiert, die die Kombination aus maximaler Helligkeit, Farbtiefe und Kontrastverhältnis des Displays angibt. Mögliche Werte sind standard
und high
. Ein HD-Bildschirm, der den dynamic-range
-Wert high
anzeigt, erhält mithilfe der neuen CSS-Funktion color()
einen anderen Farbraum.
.neon-red {
color: hsl(355 100% 95%);
}
@media (dynamic-range: high) {
.neon-red {
color: color(display-p3 1 0 0);
}
}
Interaktion
Medienfunktionen können auch die Art des Eingabemechanismus erfassen, der für die Interaktion mit Ihrer Website verwendet wird: hover
, any-hover
, pointer
und any-pointer
. Weitere Informationen erhalten Sie im Modul zur Interaktion.
Einstellungen
Es gibt eine Reihe von Medienabfragen, mit denen Sie auf Nutzereinstellungen reagieren können: prefers-color-scheme
, prefers-contrast
und prefers-reduced-motion
. Weitere Informationen finden Sie in den Modulen Design und Barrierefreiheit.
Sie können Medienfunktionen in einer Medienabfrage kombinieren. Sie können Ihre Animationsstile so festlegen, dass sie nur angewendet werden, wenn das Gerät eine schnelle Aktualisierungsrate hat und der Nutzer keine Bewegungselemente bevorzugt.
@media (update: fast) and (prefers-reduced-motion: no-preference) {
a {
transition-duration: 0.4s;
transition-property: transform;
}
a:hover {
transform: scale(150%);
}
}
Weitere Medienfunktionen
Wir arbeiten daran, weitere Medienfunktionen hinzuzufügen.
Die Medienfunktionen forced-colors
und inverted-colors
geben an, ob auf einem Gerät eine eingeschränkte oder eine umgekehrte Farbpalette verwendet wird.
Mit einer Medienfunktion von scripting
können Sie Ihr CSS an die Verfügbarkeit von JavaScript anpassen.
Mit einer Medienfunktion namens prefers-reduced-data
können Nutzer angeben, dass sie eine getaktete Verbindung nutzen, damit Sie kleinere oder weniger Assets senden können.
Weitere Vorschläge sind noch in der Entwicklung. Im nächsten und letzten Modul geht es um ein Angebot für eine Medienfunktion, die unterschiedliche Bildschirmkonfigurationen unterstützt.
Wissen testen
Testen Sie Ihr Wissen über Medienfunktionen
Mit einer Medienabfrage kann nach einem Gerät mit einer bestimmten Breite wie z. B. @media (width: 1024px)
gesucht werden?
Mit einer Medienabfrage kann nach einem bestimmten Gerät (aspect-ratio
) wie @media (aspect-ratio: 4/3)
gesucht werden?
Was sind gültige Farbmedienabfragen?
@media (dynamic-range: high)
@media (color-gamut: srgb)
@media (min-color-index: 15000)
@media (color)
@media (monochrome)
Welche der folgenden Medienabfragen mit Nutzereinstellungen sind gültig?
@media (prefers-contrast: more)
@media (prefers-site-speed: fast)
@media (prefers-colors: high-definition)
@media (prefers-color-scheme: dark)
@media (prefers-reduced-motion: reduce)