Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Responsive Webdesign – Grundlagen

CSS3-Media Queries – Einführung

Testen Sie unsere 2021 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Mit CSS3 ist es möglich, die Geräteeigenschaften abzufragen und je nach Ergebnis unterschiedliche Formatierungen ausliefern zu lassen. Hier sehen Sie, wie das funktioniert.

Transkript

In CSS 2.1 können Sie nur unterschiedliche Formatierungen festlegen, je nachdem, ob etwas - etwa ein Bildschirm oder ein Drucker ist. Das Problem daran: ein Bildschirm kann ganz unterschiedlich aussehen und ganz verschiedene Eigenschaften haben. Es kann der riesige im Monitor eines Architekten sein, ein Monitor eines Notebooks, eines Tablets, eines Smartphones, einer Spielkonsole und und und... Genau dafür können Sie jetzt mit CSS 3, mit den CSS 3 Media Queries nicht nur nach dem Ausgabemedium, sondern auch nach seinen Eigenschaften differenzieren. Ich habe hier ein kleines Beispiel vorbereitet, das nur einen Absatz enthält und mehr nicht. Und hier ein paar grundlegende Formatierungen, wie beispielsweise die Hintergrundfarbe. Wenn wir uns das einmal ansehen, gibt es keine Überraschung. Das Ganze hat einen weißen Hintergrund und da finde ich jetzt meinen Absatz darauf. Jetzt kann ich in CSS 3 mit den sogenannten Media Queries unterschiedliche Formatierungen, beispielsweise je nachdem vornehmen, wie groß mein Bildschirm oder beziehungsweise mein Viewport jetzt hier ist. Machen wir mal ein kleines Beispiel und sagen: wir machen hier eine @media-Regel. Und wir gehen auf einen Bildschirm, das heißt das Ausgabemedium ist Screen. Soweit ist es noch CSS 2.1 und jetzt kommt der Teil von CSS 3.1, nämlich das Schlüsselwort "And". Also, ich habe jetzt Abfragen nach einem Bildschirm, der bestimmte Eigenschaften hat. Das macht dieses "And". Zum Beispiel, wenn der jetzt eine Mindestbreite von 540 Pixeln hat, 540, doppel, genau, Pixel. Bei einer Mindestbreite von 540 Pixeln. Und das, was geschehen soll, schreibe ich, wie gewohnt, in geschweifte Klammern. Und was soll dann sein? Jetzt könnte ich hier beispielsweise einmal die Farbe des Body ändern. Das heißt, ich ergänze mein Body und gebe dem einmal eine andere Hintergrundfarbe. "background-color", zum Beispiel setzte ich es dann auf Grau. Was habe ich damit gemacht? Jetzt habe ich gesagt: wenn der Bildschirm, also das Browser-Fenster ist es in unserem Fall, eine Mindestgröße von 540 Pixeln hat, dann soll der Farbhintergrund grau sein. Und wenn ich das jetzt hier mal aktualisiere, dann ist es grau geworden, denn es hat ja jetzt hier die angegebene Größe. Wenn ich das Browser-Fenster hier aber einmal kleiner ziehe, dann sehen Sie, wenn es unterhalb dieser 540 Pixeln ist, dann greift wieder meine Angabe, die ich zu Anfang festgelegt habe und nämlich hier. Das Ganze wird wieder weiß und wenn ich es größer mache, ist es grau. Auf diese Art kann ich natürlich auch eine weitere Regel bestimmen. Zum Beispiel, wenn jetzt das Ganze eine Mindestbreite von 740 Pixeln hat und dann lasse ich es beispielsweise rot werden. Und wenn wir dieses Beispiel jetzt hier nochmal aktualisieren, dann sehen Sie hier: es ist rot. Wenn es ein bisschen kleiner ist: ist es grau. Und wenn es ganz klein ist: ist es weiß. Also, hier haben wir jetzt drei verschiedene Formatierungen, die jeweils greifen, je nachdem, wie groß das Browser-Fenster ist. Ich habe das hier jetzt festgelegt innerhalb des Style Sheets der Style-Angaben mit einer @media-Regel. Das hat den Vorteil, dass keine externen Dateien dadurch geladen werden müssen. Aber Sie können diese Angabe hier, im Beispiel screen and (min-width), natürlich auch an anderen Stellen vornehmen. Hier habe ich mal ein Beispiel vorbereitet, wo ich Link-Elemente ergänzt habe. Und Sie sehen hier jetzt beim zweiten Link-Element wird das Style Sheet "mittel.css" geladen. Und wann es geladen werden soll, das steht bei dieser Media-Angabe, nämlich wenn es ein Bildschirm ist mit einer Mindestbreite von 580. Könnte natürlich auch hier 540 Pixeln machen, wie wir eben im Beispiel hatten. Oder eine beliebige andere Angabe. Und wiederum ein anderes Style Sheet lasse ich laden, ab einer Mindestbreite von 740 Pixeln. Die externen Style Sheets habe ich jetzt schon angelegt. anfang.css liegt mir einfach die grundlegenden Formatierungen fest und auch die weiße Hintergrundfarbe. mittel - ist dann Body grau eingefärbt. Bei gross ist es rot eingefärbt. Und wenn wir dieses Beispiel einmal im Browser anschauen, dann ist es genauso, wie eben auch. Das ist je nach Größe - eben weißer Hintergrund. Dann ab einer gewissen Größe - grauer Hintergrund. Und ab einer weiteren Größe, die wir hier festgelegt haben, das 740, dann ist der Hintergrund rot. Das ist also die zweite Möglichkeit das anzugeben, bei einem Link-Element. Und die dritte Möglichkeit, die Sie haben, ist dass Sie es auch bei einem @import angeben können. Das sieht dann so aus. Ich habe hier jetzt drei Style Sheets, die ich alle über @import einbinde. Das Erste wird ganz normal immer eingebunden. Das Zweite, dessen Formatierungen wirken jetzt nur ab einer Breite von 540 Pixeln. Und das Letzte - ab einer Breite von 740 Pixeln. Und das Ergebnis ist immer dasselbe, dass sich eben die Hintergrundfarbe ändert, je nach Größe des Browser-Fensters. Bei diesen Beispielen, die wir hier hatten, habe ich jetzt immer nur die Hintergrundfarbe geändert. Aber stattdessen können Sie natürlich alle beliebigen CSS-Formatierungen durchführen, die es gibt und beispielsweise auch die Anordnungen ganz ändern. Sie können eben auf großem Bildschirm etwas mehrspaltig darstellen und auf kleinem Bildschirm untereinander. Das sind alles Möglichkeiten, die hier existieren. Die CSS 3 Media Queries also erweitern die Medien-Angaben aus CSS 2.1 durch die Abfrage nach Geräteeigenschaften. Sehr häufig werden Sie mit der Breite arbeiten, wie wir das jetzt hier in diesem Beispiel gemacht haben. Und diese Angaben können Sie jetzt sowohl bei @import vornehmen. Sie können es, was die empfohlene Methode ist, bei @media vornehmen. Aber Sie können es selbstverständlich auch bei externen Style Sheets, bei dem HTML Media-Attribut angeben.

Responsive Webdesign – Grundlagen

Lernen Sie die Hintergründe von Responsive Webdesign kennen und sehen Sie, wie sich über diese Technik Webinhalte auf den unterschiedlichsten Geräten gleichwertig anzeigen lassen.

5 Std. 47 min (59 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!