Veit Schiele Communications

Veit Schiele Communications

Media Queries

erstellt von Veit Schielezuletzt verändert: 02.07.2013 18:03 Uhr © Veit Schiele 2011–2013
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
}
Artikelaktionen