Responsive Webdesign Teil 2: Media Queries einrichten

Im zweiten Teil der Reihe „Responsive Webdesign“ möchte ich dir schließlich 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 hierzu 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 entsprechend 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 Grunde genommen auf zwei Arten in deine Website 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;}
}

 

 

In Beispiel 1 erfolgt die Einbindung der Media Queries dabei direkt im head-Bereich deiner Website. Im zweiten Beispiel erfolgt der Einsatz der Media Queries hingegen direkt im Stylesheet.

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 jedoch, abhängig von Anzahl und Umfang der verwendeten Media Queries, den soeben erschaffenen Vorteil wieder zunichte machen.

 

Praxisbeispiel

Das Ganze klingt aber nach wie vor noch 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 schließlich erzielen möchten.

Verschiedene Versionen einer Webseite mit Media Queries definiert
Verschiedene Anzeigevarianten der gleichen Webseite mit Media Queries realisiert.

 

Kommen wir nun im Folgenden zum entsprechenden HTML- und CSS Code, den wir für dieses Beispiel benötigen. Um dazu obiges Beispiel nachzustellen, kannst du die folgenden Snippets 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 des Weiteren auf Wunsch auch zu (orientation : portrait) ändern.

 

Fazit

Mit den oben genannten Beispielen und den Grundlagen des Responsive Webdesigns kannst du schließlich 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.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

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