Veit Schiele Communications

Veit Schiele Communications

Media Queries

erstellt von Veit Schielezuletzt verändert: 21.12.2015 20:39 Uhr © Veit Schiele 2011–2015
Artikelaktionen

Media Queries beginnen mit der Angabe des Media Types, gefolgt von einer Bedingung zur Mindestbreite des Monitors:

@media screen and (min-width: 1024px) {
    body {
        font-size: 100%;
   }
}

Somit lassen sich deutlich feiner als bei dem Media Types die verschiedenen Ausgabegeräte unterscheiden:

@media screen and (max-width: 768px) {
    …
}
@media screen and (max-width: 520px) {
    …
}
@media screen and (min-width: 1200px) {
    …
}

Auch lassen sich Retina-Displays erkennen mit:

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-resolution: 192dpi) {
           …
}

Übliche Unterscheidungen der verschiedenen Ausgabegeräte sind:

Breite des DisplaysBeschreibung
320pxSmartphones in portrait- Ausrichtung
480pxSmartphones in landscape- Ausrichtung
600pxKleine Tablets wie Amazon Kindle, Banres & Noble Nook in portrait-Ausrichtung
768px10"-Tablets wie das iPad in portrait-Ausrichtung
1024px10"-Tablets wie das iPad in landscape-Ausrichtung, Netbooks, Laptops und Desktop- Displays.
1200pxWidescreen-Displays

Die Web Developer Toolbar erlaubt die einfache Simulation unterschiedlicher Ausgabeformate in Firefox oder Chrome:

Web-Developer-Toolbar: Größe

Referenzierung

Sie können entweder in link-Elementen oder in einer @import-Anweisung angegeben werden.

  • link-Element:
<link rel="stylesheet" href="wide.css" media="screen and (min-width: 1024px)" />
  • @import-Anweisung:
@import url("wide.css") screen and (min-width: 1024px);

Features

Im folgenden eine tabellarische Aufstellung der möglichen Media Queries:

NameBeschreibungmin- und max- Präfix
widthBreite des Elementsja
heightHöhe des Elementsja
device-widthBreite des Displaysja
device-heightHöhe des Displaysja
orientationMögliche Werte sind portrait und landscapeja
aspect-ratioVerhältnis von Breite zu Höhe eines Displays, z.B. 16:9ja
device-aspect-ratioVerhältnis von Breite zu Höhe der geränderten Fläche, z.B. 16:9ja
colorDie Anzahl der Bits zur Darstellung der Farbe je Pixel, color: 8. Nicht-Farbdisplays sollten hier 0 zurückgeben.ja
color-indexDie Anzahl der Farben in der Farbtabelle, z.B. @media screen and (min-color-index: 256ja
monochromeÄhnlich wie color kann hier die Anzahl der Graustufen je Pixel angegeben werden, z.B. monochrome: 8ja
resolutionAuflösung des Ausgabegeräts, z.B. screen and (resolution: 72dpi)` oder screen and (max-resolution: 300dpi).ja
scanFür TV-Geräte können die folgenden Werte unterschieden werden: scan oder progressive.nein
gridDisplays mit festem Raster können angesprochen werden mit (grid).nein

Einen vollständigen Überblick erhalten Sie in Media features.

Die verschiedenen Queries können kombiniert werden mit ànd, z.B.:

@media screen and (min-device-width: 480px) and (orientation: landscape) {…}

Media Queries in Javascripts

Sollen bestimmte Funktionen in Javascript-Dateien nur auf bestimmten Ausgabegeräten bereitgestellt werden, so kann einfach eine ìf`-Anweisung für eine Media Query angegeben werden, z.B.:

if (screen.width > 720) {
    $(document).ready(function() {…});
}

Mit matchMedia.js lassen sich Media-Types oder Media Queries einfach abfragen, z.B.:

if (matchMedia('all and (orientation:landscape)').matches) {
  // probably tablet in widescreen view
}

Element Queries

Media-Queries beschränken uns auf den Kontext des gesamten Ansichtsfenster und nicht nur auf ein einzelnes Element auf einer Seite. Für jedes Element müssen wir festlegen, wie sie sich in diesem Zusammenhang neu ordnen sollen. Je komplexer das System wird, desto mehr Zusammenhänge müssen beschrieben werden.

Element Queries erlauben CSS-Anweisungen in Abhängigkeit z.B. von der Breite oder Höhe dieses Elements. Dadurch muss nicht mehr die gesamte Seite und das Zusammenspiel aller Elemente betrachtet werden. Dies verringert nicht nur den Umfang der CSS-Anweisungen, um die Abhängigkeiten zu definieren, sondern macht ihn auch insgesamt besser lesbar.

Ich möchte jedoch nicht vorenthalten, dass Element Queries zu Paradoxien führen können: so kann sich z.B. die Breite des übergeordneten elements durch den Inhalt so verändern, dass eine Element Query dann nicht mehr gültig wäre; Sie würden also je nach Berechnungsgrundlage zu einem anderen Ergebnis kommen. Dennoch sind mittlerweile eine Reihe von JavaScript-Modulen entstanden, die das Problem zu lösen versuchen:

Artikelaktionen