Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Erste Schritte mit Responsive Webdesign

Funktionsweise, Aufbau und Programmierung eines Media Query

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Media Queries erkennen, auf welchem Endgerät eine Webpage angezeigt wird. Um so ein Media Query in Ihrem Quelltext zu implementieren, gibt es gleich drei verschiedene Möglichkeiten. Welche das sind, erfahren Sie in diesem Video.

Transkript

Ich möchte ihnen nun die unterschiedlichen Arten der Implementierung eines Media Queries an einem kleinen Beispiel aufzeigen. Dazu öffne ich eine Datei und diese Datei besitzt zwei separate Stylesheet-Abschnitte, separate Stylesheet-Blöcke. Dieser eine Block kümmert sich um die Druckausgabe und der andere Block um die Bildschirmausgabe. Das Attribut "Media" innerhalb der Style-Definition sorgt dafür, dass eine Unterscheidung zwischen den Endgeräten getroffen werden kann. Die Verwendung der Media-Attribute ist eine Möglichkeit, die wohl eher seltener bei dieser Schreibweise wie wir sie hier sehen zum Einsatz kommt, sondern eher, wenn wir Bezug nehmen auf eine externe Stylesheet-Datei. Ich möchte Ihnen eine weitere Variante der Media Query vorstellen und dazu lege ich einen komplett neuen Style-Block innerhalb des Dokumentes im Kopf an. Style, auch hier wieder der Typ, das kann man übrigens bei HTML5 alles weglassen, und das Attribut "Media", das brauche ich an dieser Stelle auch nicht mehr, ich verzichte also ganz darauf. Schauen wir uns ganz kurz an was geschehen soll. D.h., dieser Bereich "Banner" findet sich hier unten in der ID im Dokument wieder, betrifft also genau diesen Layer, diesen Div-Abschnitt. Innerhalb dieses Div-Abschnitts befindet sich eine ganz normale Grafik. Diese Grafik soll auf dem Bildschirm zentriert ausgerichtet angezeigt werden und mit einem farbigen Hintergrund. Bei einer Druckausgabe soll alles so bleiben wie auch beim Bildschirm, nur mit der Ausnahme, dass der Hintergrund hier weiß ist, damit wir einfach Farbe sparen. Das, was zuvor in zwei separaten Stylesheet-Blöcken implementiert wurde, das kann ich auch in einem zusammenfassen und den CSS-Befehl zum Media Query verwenden. D.h., wir haben also hier zwei Möglichkeiten, die wir sehen. Nämlich einmal das Attribut "Media", um den Media Query anzusprechen und jetzt folgend den CSS-Befehl - und den leiten Sie ein durch ein @ und den Befehl "Media". Sie sehen, die unterschiedliche Darstellung der Farbe deutet schon darauf hin, dass hier ein separates Konstrukt zur Verfügung gestellt wird und für den Anfang nehmen wir die vorhandenen Beispiele, dass ich ein Media Query für den Screen und für den Drucker schreibe. In typischer CSS-Manier gehen die geschweiften Klammern auf und hier hinein muss ich nun nichts anderes setzen als das, was wir hier als Block schon programmiert haben. Das kopiere ich einfach und setze das hier rein, ein bisschen angepasst und natürlich geschweifte Klammer wieder geschlossen. D.h., diesen ganzen Block, den können wir schon löschen, den brauchen wir nicht mehr und was jetzt noch überbleibt, ist die Aufnahme der Druckausgabe. Das ist im Wesentlichen wieder identisch, indem ich hingehe und einen Media Query nun für die Druckausgabe erstelle und da soll sich nur die Farbe ändern, d.h. weißer Hintergrund - und damit ist der Block, den wir hier haben, ebenfalls überflüssig  geworden. Sie sehen also, im Grunde ist es jetzt nicht eine kürzere Schreibweise, es ist einfach die andere Art und Weise, nämlich innerhalb der Stylesheets die Media Queries oder unterschiedliche Endgeräte anzusprechen. Das speichere ich kurz ab und schauen wir es uns kurz an, in der Vorschau und wie wir sehen, haben wir im Screen hier die zentriert ausgerichtete Grafik mit einem grauen Hintergrund. Sobald ich nun dieses Dokument ausdrucken würde - ich gehe nicht auf den Drucker, sondern hier auf die Vorschau - sehe ich, dass der graue Hintergrund hier an der Stelle verschwunden ist. Das heißt, innerhalb des CSS wird über die Medien-Abfrage, über die Endgeräte-Abfrage Screen und Print diese Unterscheidung getroffen, dass einmal mit farbigem Hintergrund und einmal ohne farbigen Hintergrund gearbeitet wird. Wir können noch einen zusätzlichen Media Query implementieren, der eine Unterscheidung trifft in alle Endgeräte und in den Druck und den Screen-Bereich, den wir bereits haben. Ich schließe dazu die Vorschau wieder und wechsle in meinen Stylesheet und nehme hier einen weiteren Media Query auf, der mit dem simplen Befehl "all" alle weiteren Endgerät in Betrachtung nimmt. Das soll den Banner betreffen, d.h. ich füge das ein und für alle IDs, egal auf welchen Endgeräten, gilt, dass die Ausrichtung der Grafik zentriert stattfinden soll. Also nehme ich genau diese Zeile raus, die Farbangabe, die brauche ich nämlich separat einmal für Screen und einmal für Print. Das bedeutet, hier an der Stelle brauche ich die zentrierte Definition nicht und beim Print ebenfalls nicht. Ich habe jetzt eine Unterscheidung getroffen, einmal für alle Endgeräte, einmal speziell für den Bildschirm und einmal speziell für den Ausdruck. Auch das schauen wir uns noch kurz an, ich speichere das ab, rufe die Vorschau auf, alles ist so, wie wir es eben gesehen haben. Sobald ich auch hier wieder in die Druckvorschau gehe, sieht man, dass der Hintergrund ausgeblendet wird. Der Vorteil hierbei liegt auf der Hand, d.h. ich kann hier in diesem Block alle Instruktionen und alle Befehle unterbringen, die alle Endgeräte betreffen und dann separat gesplittet mich auf die einzelnen Endgeräte konzentrieren, die ich unterstützen möchte. Eine weitere Möglichkeit, einen Stylesheet über Media Queries passend zu laden oder aufzurufen, ist die Verbindung zu einer externen Datei. Dazu möchte ich das programmierte Stylesheet auslagern in eine externe Datei. Ich markiere das und kopiere das entsprechend in die Zwischenablage, eröffne eine neue Datei, das soll in diesem Fall ein Stylesheet sein, also eine CSS-Datei und das brauchen wir nicht wirklich und hier kopiere ich das über die Zwischenablage in das Dokument hinein und speichere es anschließend unter extern.css ab. Auf diese Datei möchte ich nun zugreifen, d.h. ich brauche den kompletten Einstieg hier nicht mehr, ich nehme das raus und den Befehl, den kennen Sie vielleicht schon aus der normalen HTML-Programmierung, der Befehl heißt "Link" und das füge ich jetzt hier unter dem Titel ein. Den Vorwärtsverweis auf den Typus, dass es sich um einen Stylesheet handelt und anschließend um den Typ CSS und folgend kommt nun die Referenz auf die eigentliche Datei, die rufe ich kurz auf, nämlich unser extern.css, das öffne ich an der Stelle und bin an dieser Position angekommen bereits fertig. D.h. die Datei abgespeichert und überprüft bringt uns wieder das bekannte Ergebnis, wieder wird es in der Druckausgabe ohne den farbigen Hintergrund sein, d.h., alles ist nun so geblieben, wie wir es kennengelernt haben - mit einem großen Unterschied, ich habe einen einzigen Bezug in meiner HTML-Datei und das Stylesheet ausgelagert in eine externe CSS. Wenn wir uns nun vorstellen, dass diese externe CSS nicht für bspw. Screen oder für Print zuständig ist sondern dass wir eine separate Stylesheet-Datei laden möchten, z.B. nur für Print oder nur für Screen, einfach weil sich dort so viel verändert drin, dass es sich lohnt, das Ganze in unterschiedliche Stylesheet-Dateien zu packen, dann besteht auch die Möglichkeit nun ein Media Query über den "Link"-Befehl anzusprechen. Das ist aber für Sie nichts neues, denn letztendlich ist es hier wieder die Verwendung des Attributes "Media", was Sie eben schon einmal gesehen haben. D.h., wenn ich hier hingehe, kann ich genauso wieder z.B. sagen, bitte lade mir das Stylesheet, z.B. screen.css, wenn der Medientyp der Bildschirm ist oder wenn der Medientyp bspw. der Drucker ist. Sie haben drei Möglichkeiten kennengelernt, einen Media Query zu implementieren. Nämlich einmal als den CSS-Befehl, also @media und einmal als HTML-Attribut, innerhalb eines HTML-Befehls, das Attribut "Media". Zuzüglich der Auslagerung über den "Link"-Befehl in eine externe Stylesheet-Datei, wo Sie aber erneut das Attribut "Media" einsetzen.

Erste Schritte mit Responsive Webdesign

Erarbeiten Sie sich die grundlegenden Techniken zu Responsive Webdesign und stellen Sie damit sicher, dass sich Ihre Webseiten auf unterschiedlichen Endgeräten einsetzen lassen.

1 Std. 32 min (11 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!