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:


Beispiel:

<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:


Beispiel:

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 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. Das beschleunigt so den Aufbau der Webseite. Jedoch lässt du mit diesem Beispiel dann ein großes Stylesheets für mobile Geräte laden. Je nach Anzahl und Umfang der Abfragen, kann dies den erzeugten Vorteil wieder zunichte machen.

Du solltest daher abwägen, für welche Variante du dich entscheidest. In der Regel dürfte aber eine einzelnes Stylesheet die bessere Variante darstellen.

Praxisbeispiel

Das Ganze klingt aber nach wie vor noch sehr theoretisch. Daher möchte ich dir das Thema nun anhand eines Beispiels aus der Praxis näher bringen. In der folgenden Grafik siehst du das Ergebnis, welches wir schließlich erzielen möchten.

Ein Beispiel, wie Media Queries eingesetzt werden
Verschiedene Anzeigevarianten der gleichen Webseite mit Media Queries realisiert.

Unser CSS soll die eben gezeigten Kombinationen abdecken können. Wir möchten keine Elemente verstecken. Wir möchten sie, je nach Gerät, nur anders anordnen.

Nachstehend zeige ich dir den dafür benötigten HTML- und CSS Code. Verwende einfach die folgenden Snippets, um das Beispiel von oben nachzustellen.

Grundgerüst:


Beispiel:

<!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:


Beispiel:

* {
 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:


Beispiel:

@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:


Beispiel:

@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:

Folge einfach diesem Link (öffnet in einem neuen Tab), um dir das Beispiel im Browser anzuschauen.

Media Queries für diverse Anzeigegeräte

Abschließend möchte ich dir noch die Media Queries für einige, wichtige Anzeigegeräte vorstellen:

iPhone 5, 5S, 5C, 5SE

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

}

iPhone 6, 6S, 7, 8

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

}

iPhone 6+, 7+, 8+

@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

iPhone X, XS

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

Samsung Galaxy S6, Google Pixel, Google Pixel XL

@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 4) {

}

iPad 3, 4, Pro 9,7 Zoll

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

}

iPad Pro 10,5 Zoll

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

}

Apple Watch

@media
  (max-device-width: 42mm)
  and (min-device-width: 38mm) { 

}

Zusätzlich kannst du noch danach unterscheiden, ob das Gerät im Portrait-Modus (aufrecht) oder im Landscape-Modus (waagerecht) gehalten wird. Dazu fügst du zusätzlich noch and (orientation: portrait) oder and (orientation: landscape) dem entsprechenden Code Snippet hinzu.

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.