CSS3: Media Queries

Falls man mit einer HTML5 Webseite auf Anfragen verschiedener Endgeräte (Desktop/Tablet/Smartphones) reagieren möchte, kann man dies mit dem in CSS3 eingeführten Feature MediaQueries tun.

MediaQueries sind eine Weiterentwicklung der MediaTypes, die schon länger in CSS bekannt sind.

<link rel="stylesheet" media="screen" href=" screen.css" type="text/css">

<link rel="stylesheet" media="print" href="print.css" type="text/css">

<link rel="stylesheet" media="handheld" href=" handheld.css" type="text/css">

Somit war es bisher möglich auf verschiedene Ausgabearten zu reagieren.

MediaQueries gehen einen Schritt weiter und ermöglichen eine genauere Identifizierung der Endgeräte. Somit kann auf fast jeden Fall nur mit CSS reagiert werden. Das Verhalten wird für verschiedenste Szenarien festgelegt ohne den Inhalt selber zu modifizieren.

Die wichtigsten Eigenschaften im Überblick:

min-width/-height und max-width/-height : Masse des Browserfensters

min-/max-device-width und min-/max- device-height : Masse des Bildschirms

orientation :  kann Portrait oder Landscape sein

(Eine ausführliche Auflistung der Eigenschaften: http://www.w3.org/TR/css3-mediaqueries/#media1 )

Ein MediaQuery  ist ein in CSS formulierter Ausdruck, der true oder false sein kann.

@media screen and (max-width: 768px) {

body {

background-color: rgba(255,0,0,0.5);

}

}

Ist somit true, wenn die Breite maximal 768 px beträgt. Innerhalb der „{…}“ kann ein CSS Ausdruck stehen, der die ausserhalb definierten überschreibt.

Die MediaQueries lassen sich auf 3 Wege einbinden:

• CssImport
  • Im CSS File kann, falls ein MediaQuery aktiv wird, ein weiteres CSS mit den entsprechenden Werten hinzugeladen werden. @import «smallscreen.css» only screen and (max-width: 480px);

• Innerhalb vom CSS
  • MediaQueries können auch innerhalb des schon vorhandenen CSS-Codes vorkommen.

body

...

h1

...

// MEDIA QUERY

further Css

• In einem Link mit einem Verweis auf ein anderes CSS
  • <link rel="alternate" media="only screen and (max-width: 640px)" href="…">)

Performancemassig ist hier die zweite Variante zu bevorzugen.

Achtung bei iPhone und Co:

Um das iPhone zu identifizieren gilt u.a. folgender Media Query:

@media screen and

(device-width: 320px)and

(device-height: 568px)and

(-webkit-device-pixel-ratio: 2){

...
}

Das iPhone (4, 4S und 5) besitzt jedoch eine Auflösung von 1136×640px. Wieso ist es mit dem MediaQuery identifizierbar, der auf eine Breite von 320px ausgelegt ist?

Hierbei ist der Unterschied zwischen physikalischer Auflösung und logischer Auflösung wichtig:

Die physikalische Auflösung des Gerätes ist 1136×640px. Apple-Geräte haben beim Retina-Display 2 physikalische Pixel in einem Css-Pixel!

Teilt man nun die physikalische Auflösung durch die device-pixel-ratio kommt man auf die logische Auflösung. Dies sind die eigentlichen Werte, die es in einem Media Query abzufragen gilt.

Tipp: Wem das beim iPhone 5 zu mühsam ist, kann auch auf das Seitenverhältnis zugreifen:

@media screen and (device-aspect-ratio: 40/71) {
}

(für das iPhone 5)

Eine Liste um viele Geräte mitsamt ihrer Auflösungen und pixeldichte abzufragen gibt es hier: http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density