Lange Zeit erstellte man Websites lediglich für die Ansicht auf Monitoren. Mit dem Zeitalter der Smartphones und Tablets hat sich hier der Umfang stark vergrößert. Eine moderne Website muss sowohl auf dem Monitor, als auch auf vielen anderen Ausgabegeräten wie Smartphones gut aussehen. Abhilfe schaffen hier die CSS3 Media Queries.
Was ist das?
Mit CSS3 Media Queries habt ihr die Möglichkeit, verschiedene CSS Stile für verschiedene Ausgabemedien zu bestimmen. So könnt ihr beispielsweise angeben, dass ab einer Fensterbreite von 480 Pixel (Iphone) der Browser andere CSS Angaben ausführt. 4 wichtige Angaben wären folgende:
– width (Viewport-Breite)
– height (Viewport-Höhe)
– device-width (Breite des Mediums)
– device-height (Höhe des Mediums)
Wie verwende ich CSS3 Media Queries?
Es gibt im Grunde zwei Möglichkeiten. Entweder man erstellt für verschiedene Medien unterschiedliche CSS Dateien und verweist darauf im Header der Seite, oder man trägt die Angaben in einer einzelnen CSS-Datei ein. Empfehlenswert ist letzteres, da der Browser dann nur eine einzige CSS-Datei laden muss und sich somit die Ladezeit nicht verschlechtert. Ich erkläre trotzdem kurz beide Methoden:
CSS3 Media Queries mit unterschiedlichen CSS Dateien
Wir wollen zum Beispiel die CSS Angaben für die Ausgabe am Iphone 4 anpassen. Als erstes erstellen wir uns eine neue CSS Datei und nennen sie „iphone4.css“. Dort können nun die CSS Stile eingetragen werden, die für die Ausgabe am Iphone 4 gedacht sind. Wenn wir das getan haben müssen wir im Header unserer Seite auf die neue CSS Datei verlinken. Das funktioniert so:
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone4.css" />
Wenn das Ausgabemedium nun eine maximale Breite von 480 Pixeln aufweist, greift der Browser auf die iphone4.css.
CSS3 Media Queries in einer CSS Datei
Praktischer ist es die Angaben in einer einzigen CSS Datei zu machen. Das Prinzip ist im Grunde das selbe. Wir öffnen unsere Datei und gehen wie folgt vor:
@media only screen and (max-width: 480px) {
}
Zwischen den geschweiften Klammern können wir nun unsere CSS Stile eintragen, die übernommen werden, wenn das Endgerät eine maximale Viewportbreite von 480 Pixel aufweist.
Praktisches Beispiel
Ich habe euch ein kleines Beispiel erstellt.
Hier der Code dazu:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset=utf-8" />
<title>CSS3 Media Queries</title>
<style type="text/css">
body {
background-color:#fcfcfc;
}
#container {
width:1000px;
margin:50px auto;
}
#header {
width:960px;
height:200px;
background-color:#238096;
}
#content {
width:600px;
height:500px;
background-color:green;
float:left;
}
#sidebar {
width:340px;
height:500px;
margin-left:20px;
background-color:#aaa;
float:left;
}
@media only screen and (max-width: 980px) {
#container {
width:100%;
}
#header {
width:80%;
margin:0 auto;
}
#content {
width:80%;
float:none;
margin:0 auto;
}
#sidebar {
width:80%;
margin:0 auto;
margin-top:10px;
float:none;
}
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="sidebar"></div>
</div>
</body>
</html>
Wie man im Code erkennen kann habe ich hier eine Viewportbreite von 980 Pixel angegeben. Wenn wir nun das Beispiel öffnen und versuchen das Browserfenster kleiner zu skalieren, stellen wir fest, dass sich die Sidebar ab einer Viewportbreite von 980 Pixel vom float löst und nach unten wandert. Außerdem basiert das Layout nun auf Prozentwerten und passt sich der Browsergröße an.
An dieser Stelle würde ich euch gerne eine Website mitgeben, die für diesen Fachbereich sehr nützlich ist. Es handelt sich um http://responsinator.com/. Dort könnt ihr eure URL eintragen und ihr bekommt eine Ansicht eurer Website für verschiedene mobile Endgeräte. Außerdem könnt ihr dort die wichtigsten Formate einsehen.
Falls ihr dazu Fragen habt könnt ihr sehr gerne die Kommentarfunktion nutzen.
Smalltalk-Ecke
Hat Dir der Artikel gefallen oder möchtest Du am Inhalt etwas ergänzen? Hast Du weitere Fragen dazu? Lass uns gerne dazu austauschen. Ich freue mich von Dir zu hören! :)