Mit diesem Artikel wird unser Webdesign endlich responsiv…

Let‘s get responsiv!

Responsives Webdesign was ist das überhaupt? Ganz einfach erklärt, geht es darum eine Webseite für bestimmte Ausgabegeräte (Bildschirmgrößen) anzupassen. Unsere Webseite soll also auf dem großen Bildschirm des Desktop-Computers genauso gut aussehen wie auf einem Smartphone-Display…Um das zu erreichen, kommen jetzt Media Queries ins Spiel.

Methode 1 = Link-Element

Die Media Queries können innerhalb des head-Bereiches einfach als link-Element zugefügt werden.

• <link rel=”stylesheet” href=”01_CSS/600.css” media=”screen and (max-width: 600px)”>

Im hier gezeigten Beispiel wird bis zu einer Maximalbreite von 600 Pixeln eine eigene CSS-Datei ausgeliefert. Die Datei “600.css“ bekommt für dieses Experiment folgenden Inhalt…:

body {

background-color: red;

color: black;

}

header {

background-color: green;

}

Der Hintergrund von body wird also in rot gestaltet und der header bekommt die Hintergrundfarbe grün.

Methode 2 = @media-Anweisung

Methode 2 verzichtet auf zusätzliche link-Elemente und lagert alles direkt in die CSS-Dateien aus. In der “zentrale.css“ wird folgender Eintrag ergänzt…:

• @import url(09_responsiv01.css);

Diese neue CSS-Datei wird jetzt natürlich auch erstellt und bekommt folgenden Inhalt…:

@media screen and (max-width: 600px){

header {

background-color: green;

}

} /* Ende von @media nicht löschen*/

Das Grundgerüst für Responsives Webdesign ist also erstellt. Welche Methode man nutzt ist übrigens reine Geschmackssache…Alles was jetzt kommt sind Experimente mit verschiedenen Bildschirmgrößen…