Responsive Webdesign Teil 2: Media Queries einrichten

Im zweiten Teil der Reihe „Responsive Webdesign“ möchte ich dir zeigen, welche verschiedenen Arten der Media Queries es gibt. Außerdem zeige ich dir, wie du diese auf deiner eigenen Webseite einsetzten kannst. Falls du den ersten Teil noch nicht gelesen hast, fasse ich kurz noch einmal zusammen, was Media Queries überhaupt sind.

 

Was sind Media Queries und wofür brauche ich diese?

Die Media Queries lassen sich mit dem media-Attribut vergleichen. Allerdings bieten die Media Queries hier viele zusätzliche Abfragemöglichkeiten. So lässt sich zum Beispiel anhand der Pixelbreite des Ausgabegerätes verschiedene CSS-Dateien ansprechen. Auch ist es möglich, bei einem Smartphone zu erkennen, ob man es im Hoch- oder im Querformat hält.

So bieten sich für Webdesigner natürlich viele neue Möglichkeiten. Somit kannst du bspw. dank den Media Queries komplett auf den Einsatz einer mobilen Variante deiner Website verzichten. Mit Hilfe der Abfragen lässt sich eine Webseite per CSS somit komplett für verschiedene Geräte anpassen. Und zwar ohne hier auf JavaScript oder Ähnliches setzen zu müssen.

 

Welche verschiedenen Media Queries gibt es?

In der Nachstehenden Liste zeige ich die wichtigsten Werte, die du mit den Media Queries abfragen kannst:

  • width / height (beschreibt Breite und Höhe des Anzeigebereiches, z.B. innerhalb eines Browserfensters)
  • device-width / device-height (beschreibt die komplette Anzeigebreite und -Höhe des Gerätes)
  • orientation (beschreibt die Ausrichtung des Geräts, sprich ob man es im Quer- oder Hochformat hält)
  • resolution (beschreibt die Auflösung des Anzeigegeräts)

 

Wenn du es ganz genau wissen möchtest, kannst du dir auf der Webseite des W3C-Konsortiums die vollständige Liste aller Anzeigetypen ansehen.

 

Wie können Media Queries eingesetzt werden?

Die Media Queries lassen sich im Prinzip auf zwei Arten in deine Webseite einbinden:

 

Beispiel 1:

<html>
<head>

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

</head>
<body>
<p>Hier entsteht eine Webseite</p>
</body>
</html>

 

Beispiel 2:

only screen and (max-device-width: 480px) {
 body {background:black;}
}

 

Beispiel 1 wäre die Einbindung der Media Queries direkt im <head>-Bereich deiner Webseite mit Auswahl verschiedener CSS-Stylesheets, je nach Anzeigegerät. Im zweiten Beispiel würde der Einsatz direkt im Stylesheet selbst erfolgen.

Im Prinzip ist es dabei egal, welche Variante du verwendest. Der Vorteil bei der Einbindung der Abfragen im <head>-Bereich besteht darin, dass du quasi für jedes Anzeigegerät ein eigenes Stylesheet definieren und pflegen kannst.

Variante zwei hingegen verringert die HTTP-Anfragen an den Server und beschleunigt so den Aufbau der Webseite. Jedoch lässt du mit diesem Beispiel dann ein großes Stylesheets für mobile Geräte laden. Das kann, abhängig von Anzahl und Umfang der verwendeten Media Queries, den soeben erschaffenen Vorteil wieder zunichte machen.

 

Praxisbeispiel

Das Ganze klingt nun nach wie vor sehr theoretisch. Daher möchte ich dir nun anhand eines Praxisbeispiels die Media Queries näher bringen. In der folgenden Grafik siehst du das Ergebnis, welches wir erzielen möchten.

mq
Verschiedene Anzeigevarianten der gleichen Webseite mit Media Queries realisiert.

 

Kommen wir nun zum entsprechenden HTML- und CSS-Code, den wir für dieses Beispiel benötigen. Um obiges Beispiel nachzustellen, kannst du nachstehende HTML- und CSS-Code-Schnipsel verwenden.

 

Grundgerüst:

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Anzeigebeispiel von CSS3 Media Queries f&uuml;r iPhone, iPad, Android &amp; Weitere</title> </head> <body> <div id="anzeigebereich">
 <div id="kopf">Kopfbereich</div>
 <div id="inhalt">Inhaltsbereich</div>
 <div id="sidebar1">Sidebar 1</div>
 <div id="sidebar2">Sidebar 2</div>
 <div style="clear:both;"></div>
</div> </body>
</html>

 

CSS für die Desktop-PC-Variante:

* {
 margin:0;
 padding:0;
 color:white;
} #anzeigebereich {
 margin:30px auto;
 width:960px;
} #kopf {
 width:100%;
 background:black;
 margin-bottom: 2%;
 height:150px;
} #inhalt {
 float:left;
 width:56%;
 margin-right:2%;
 background:darkred;
 height:800px;
} #sidebar1 {
 float:left;
 width:20%;
 margin-right:2%;
 background:darkgray;
 height:800px;
} #sidebar2 {
 float:left;
 width:20%;
 background:darkgray;
 height:800px;
}

 

CSS für die iPad-Variante:

@media only screen and (max-width: 1024px) {
 #anzeigebereich { width:90%; }
 #inhalt { width:78%; }
 #sidebar1 {
 width:20%;
 margin-right:0;
 margin-bottom:2%;
}
 #sidebar2 {
 width:100%;
 height:200px;
}
 }

 

CSS für die iPhone-Variante:

@media only screen and (max-width: 480px) {
 #kopf {
width:90%;
}
 #inhalt {
 width:90%;
 margin-right:0;
 margin-bottom:2%;
}
 #sidebar1 {
 width:90%;
 height:200px;
 margin-right:0;
 margin-bottom:2%;
}
 #sidebar2 {
 width:90%;
 height:200px;
 margin-top:2%;
}
}

 

Anzeigebeispiel ansehen

 

Abschließend noch die Media Queries für die wichtigsten Anzeigegeräte:

 

iPhone / iPod Touch

@media only screen and (max-device-width: 480px) {}

 

iPhone 4(S) (Retina Display)

@media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {}

 

iPad

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

 

Hinweis zum iPad: (orientation : landscape) kannst du auf Wunsch auch zu (orientation : portrait) ändern.

 

Fazit

Mit den oben genannten Beispielen und den Grundlagen des Responsive Webdesigns kannst du dein erstes, flexibles Layout aufbauen. Damit ist es allerdings noch nicht getan. Damit deine Website auch wirklich „voll flexibel“ wird, musst du noch deine Schrift optimieren. Wie genau das funktioniert, zeige ich dir im soeben verlinkten dritten Teil dieser Reihe.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.