Responsive Design

Eine durch CSS Media Queries neu entstandene Technik ist das auflösungsabhängige oder adaptive Layout bzw. englisch – responsive design.

Layout Anpassung mit CSS und Media Queries

Moderne Webseiten-Programmierung mit Media Queries für Responsive DesignDas Anpassen an die Bildschirmbreite war früher nur mit Hilfe von JavaScript möglich, jetzt funktioniert das auch mit CSS allein – das Abfragen der aktuellen Bildschirmbreite und Ausliefern eines daran angepassten Styles.

Media Queries können beides: Die festen Eigenschaften eines Displays oder die aktuelle Bildschirmabmessung abfragen und auf Änderungen reagieren. Bei der Abfrage der festen Eigenschaften wird die Eigenschaft max-device-width oder min-device-width verwendet.

Dies geschieht mit Hilfe  eines meta-Elements das dafür sorgt, dass sich die Seite an den Viewport anpasst. Schreiben Sie dazu folgende Zeile in den head der Seite:

<meta name=“viewport“ content=“width=device-width, initial-scale=1.0″>

 

Einfaches Beispiel für Responsive Design

Starten wir nun ein Beispiel: Ein 4-spaltiges Layout soll sich dem jeweiligen Browser anpassen. Hier ist es ein Leichtes die Spalten in Prozent anzulegen.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=“Content-Type“ content=“text/html;
charset=utf-8″>
<title>Responsive Design</title>
<meta name=“viewport“ content=“width=device-width, initial-scale=1.0″>
<style>
#main {overdflow: auto;}
div div {min-width: 150px; width: 21%; float: left; margin: 1%; padding: 10px 0; background: #efefef; border: none; }
</style>
</head>
<body>
<div id=“header“>
<h1>Responsive Design</h1>
</div>
<div id=“main“>
<div id=“b1″>
<h2>Box 1</h2>
<p>…….</p>
</div>
<div id=“b2″>
<h2>Box 2</h2>
<p>…….</p>
</div>
<div id=“b3″>
<h2>Box 3</h2>
<p>…….</p>
</div>
<div id=“b4″>
<h2>Box 4</h2>
<p>…….</p>
</div>
<id=“footer“>Beispiel: Responsiv Design</div>
</body>
</html>

Ein fluides Layout passt sich der Bildschirmgröße an. Mit dem Befehl in der CSS-Regel min-width wird ein Umbruch erreicht, sobald die Breite der Seite nicht mehr ausreicht.

Media Queries anwenden

Besser ist es jedoch, wenn explizit auf die Bildschirmbreite mit einem veränderten Layout reagiert werden kann. Hierzu verwendet man Media Queries.

@media screen and (min-width: 801px) {
div div {
width: 21%;
float:  left;
margin: 1%;
padding: 10px 1%;
background: #efefef;
border: none;
}
}

Dieser Code greift bei einer Fenstergröße von mehr als 800 Pixeln. Alle Boxen werden wie gehabt nebeneinander dargestellt.

@media screen and (max-width: 800px) and (min-width: 401px){
#b1, #b4 {
border: 1px solid gray;
clear:  left;
padding: 5px 10px;
}
#b2, #b3 {
width: 42%;
float: left;
margin: 2%;
padding: 10px 2%;
background: #efefef;
border: none;
}
}

Bei kleineren Bildschirmen dehnen sich die beiden äußeren Boxen über die gesamte Seite aus, die mittleren teilen sich die Breite.

@media screen and (max-width: 400px){
div div {
padding: 10px;
background: #efefef;
border: none;
}
}

Beispiel für ein adaptives bzw. responsives Layout.

Bei kleinen Bildschirmen, wie z. B. einem Smartphone, passt nur noch eine Box in die Seite, alles wird untereinander angeordnet.