Media Queries

Media Queries funktionieren sehr ähnlich wie @media print. Wer schon print.css geschrieben hat, ist mit dem Konzept von verschiedenen Designausgaben, passend zum Ausgabemedium vertraut.

@media definiert innerhalb eines style-Bereichs (oder in einer CSS-Datei) einen Bereich für Formatdefinitionen eines bestimmtes Ausgabemediums. Nach der @media-Angabe müssen geschweifte Klammern { .. } notieren werden.
Nach @media { .. } folgt, durch Leerraum getrennt, das gewünschte Ausgabemedium. Mehrere Ausgabemedien können durch Kommata getrennt in Folge notiert werden. Alle Formatdefinitionen, die innerhalb dieser geschweiften Klammern notiert werden, sind nur für die angegebenen Medien gültig.

Beispiel @media print

@media print { 
  body { 
  background-color: #ffffff; 
  font-size: 10pt; 
  font-family: Arial, Helvetica, SunSans-Regular, sans-serif; 
  color:#000000; 
  padding:0; 
  margin: 0; 
  } 
}

Eigenschaften @media

Smartphones

/* portrait and landscape */
@media screen and (min-device-width : 320px) 
and (max-device-width : 480px)  { … }

/*  landscape  */
@media screen and (min-width : 321px)  { … }

/*  portrait */
@media screen and (max-width : 320px)  { … }

/* iPhone 4 and high pixel devices  */
@media screen and (-webkit-min-device-pixel-ratio : 2)
and (device-width: 683px)
and (orientation: landscape),
screen and (device-pixel-ratio : 1.5) 
and (device-width: 400px)
and (orientation: portrait) { … }

iPads

/* portrait and landscape */
@media screen and (min-device-width : 768px) 
and (max-device-width : 1024px)  { … }

/* landscape */
@media screen and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)  { … }

/* portrait */
@media screen and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)  { … }

Desktops und Laptops

@media screen and (min-width : 1224px)  { … } 

Grosse Screens

@media screen and (min-width : 1824px)  { … }

Beispiel @media

@media screen and (min-width: 480px) { … }
@media screen and (min-width: 768px)  { … }

oder die Kurzschreibweise für mehrere Bildschirmangeben

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

In diesem Beispiel ändert sich die Hintergrundfarbe je nach Grösse des Browserfenster.
» Dieses HTML5 und CSS3 Beispiel ansehen.

@media screen and (min-width: 900px) {
   body{
   background-color:#bbb;
   color:#333;
   }
   span.gr900 {display: inline-block;}
 }

@media screen and (min-width: 600px) and (max-width: 900px) {
   body{
   background-color:#000;
   color:#fff;
   }
   span.zw600-900 { display: inline-block; }
}

@media screen and (max-width: 600px) {
   body{
   background-color:#0ff;
   color:#333;
   }
   span.k600 {display: inline-block;}
}

@media screen and (max-device-width: 480px) {
   body {
   background: #eee;
   color:f67;
   }
   span.iphone {display: inline-block;}
}

Link auf externes Stylesheet setzen

Wenn keine grossen Anpassungen gemacht werden müssen, können CSS Angaben für kleine Geräte inline notiert werden. Für grössere Änderungen, und aus Gründen der Übersichtlichkeit, kann  es jedoch sinnvoll sein, die Stylesheets für Desktop-Screens und kleinere Geräte mit einem Link auf ein separates Stylesheet zu trennen.

<link rel="stylesheet" type="text/css" 
media="screen and (max-device-width: 480px)" href="small.css">