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

Media Queries mit der API von JavaScript

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Selbstverständlich können Sie mit allen serverseitigen Script-Sprachen auf Media Queries zugreifen. Wie das funktioniert, zeigt dieses Video am Beispiel der API von JavaScript.

Transkript

Die Media Queries lassen sich auf unterschiedliche Arten und Weisen aufrufen, bzw. ansprechen. So haben sie die Möglichkeit, einmal in einem Stylesheet direkt über den CSS-Befehl "at.media" ein entsprechendes Query aufzurufen, und dann in diesem Block alle notwendigen Einstellungen vorzunehmen. Eine weitere Möglichkeit ist, das HTML-Attribut-Media zu verwenden. Das muss nicht nur wie jetzt z.B. hier an der Stelle in dem Link-Befehl stattfinden. Es ist meistens am sinnvollsten, aber das Attribut lautet "Mediam" und in dem Moment sieht man hier sehr schön: Ich kann entweder für alle End-Geräte einen Wert zuweisen, für Pre-Geräte auf diverse weitere Einstellungen zurückgreifen, unter anderem hier Terminals oder TV. Das ist nicht ganz uninteressant in der heutigen Zeit, da die Qualität der Flachbildschirme und Fernsehgeräte stark zunimmt, gibt es auch immer mehr Benutzer, die ihr Fernsehgerät fürs Surfen im Internet verwenden. Wenn Sie speziell, was die breiten Bildschirme angeht, eine Webseite anbieten möchten, könnte man da drüber darauf zugreifen. Also diese Möglichkeit besteht. Eine weitere Möglichkeit ist, über jeweilige Scriptensprachen auf die Media Queries zuzugreifen. Das möchte ich in diesem Beispiel kurz demonstrieren. Dafür füge ich hier an der Stelle einmal einen Script-Befehl ein, und dieser Script-Befehl steht nun stellvertretend für alle serverseitigen Scripten, die auf ähnliche Art und Weise verwendet werden. Ich verwende das Beispiel mit JavaScript. Es gibt aber genauso eine API für jQuerry. Was müssen wir da machen? Wir können wir auf einzelne Bereiche zugreifen? Das Erste, was ich interessant finde, ist die Device-Pixel-Ratio, d.h. das Seitenverhältnis je nach Aufruf des Gerätes. So hat man bspw. bei einem iPad die Pixel-Ratio von 1 oder auch bei einem Browser auf dem Bildschirm, bei Android-Geräten gibt es teilweise 1,5, bei den neuen iPhones aufgrund des Retina-Displays, also des hochauflösenden Displays eine Ratio von 2. Das sind Informationen, die ich über die Media Queries auf jeden Fall abfragen kann. Das machen wir ganz kurz. Es ist ziemlich einfach. Es dient jetzt nur stellvertretend dazu, dass Sie sehen, dass es eine API für die Scriptsprachen gibt. Vielleicht an der Stelle noch ganz kurz die Erwähnung: Solange Sie das über ein CSS direkt realisieren könnten, sollten Sie das immer tun. Verzichten Sie in so einem Fall tatsächlich auf die Scripten. Aber wenn Sie bspw. der Problematik Herr werden möchten, nicht immer eine hochauflösende Grafik, also der größte gemeinsame Nenner einer Grafik zu laden, der dann für alle auch kleineren Devices geleten soll, da ist z.B, das JavaScript schon ganz interessant, denn hier können Sie hingehen und passend zum jeweiligen Dokument, zum jeweiligen Device, zur jeweiligen Webseite die passende Grafik quasi nicht nachladen, sondern einfach die passende Grafik laden, und das über die Media Queries. Das ist ein interessanter Ansatzpunkt, und da lohnt es sich für Sie vielleicht mal zu experimentieren. Gehen wir zunächst weiter. Ich möchte hier das Beschränken auf eine Ausgabe auf dem Bildschrim, und mehr soll hier gar nicht geschehen. Hier sage ich jetzt einmal mal, dass--das Ganze noch schön HTML-mäßig in einen Absatz gepackt, der Browser eine jeweils Pixel-Ration hat. Der Browser hat eine Device-Pixel-Ratio von. Jetzt benutzen wir quasi die Funktion, die uns die API zur Verfügung stellt bzw. die wir über JavaScript einsetzen können, und der Befehl heißt "window.device.pixel.ratio". Bitte Groß- und Kleinschreibung beachten, wie bei JavaScript üblich. Wir schließen das Ganze noch, und das würde schon funktionieren. Wenn ich das jetzt hier am Bildschirm aufrufe, dann erhalte ich dort permanent eine 1. Wir schauen uns das jetzt gleich noch auf dem iPad, bzw. auf dem iPhone an. Das ist noch nicht so spektakulär. Interessanter ist jetzt, wenn wir eher auch auf die Media-Features zurückgreifen. Da gibt es einen ähnlich gearteten Befehl, dieser heißt "Window". Das Geheimnis ist "Match Media". Mit "Match Media" habe ich die Möglichkeit, in Form einer booleschen Überprüfung abzufragen, was gerade tatsächlich an Größen, an Resolution, an Devices verwendet wird. Das geschieht hier innerhalb dieser runden Klammer. Allerdings muss ich dafür eine Funktion aufrufen, bzw. die Matches, d.h. "Match Media Matches", und dann kann ich hier hineinschreiben, was geschehen soll. Das Ganze macht Sinn, wenn man das überprüft, weil dieser Eintrag, also ohne runde Klammer, dieser Eintrag, wie er hier steht, liefert einen booleschen Wert zurück, nämlich wenn das zutrifft, was hier eingetragen ist, dann ist es wahr, und das kann ich abfragen. Also tragen wir hier auch eine Abfrage ein, und  zwar, ich möchte überprüfen, ob MacSwiss beispielsweise 480 Pixels besitzt. So würde ich das eintragen. In dem Moment, wenn das zutrifft, kriege ich einen booleschen Wert zurück, und den kann ich in einem simplen if-Konstrukt leicht abfragen. Das machen wir hier gerade. Dann soll nur etwas ausgegeben werden, also gar nicht mal so viel: "document.write", auch hier wieder innerhalb sauberer HTML, und das Bild z.B. für 480 Pixel laden. Diese Zeile steht jetzt stellvertretend dafür, dass sie an einer bestimmten Stelle über bspw. die ID ein bestimmtes Bild laden, und damit auf ein großes verzichten, sondern immer passend zur jeweiligen Auflösung, dass wir eventuell nachladen könnten. Das bringt uns noch nicht so viel. Das würde zwar beim ersten Aufruf schon funktionieren, aber sobald wir den Browser bewegen, bzw. verkleinern und vergrößern, klappt das nicht mehr. Da es keine fortlaufende Funktion gibt, die das fortlaufend überprüft, müssen wir uns selber so etwas schreiben, einen Eventlisten-Namen, indem ich einen Intervall setze. Das machen wir kurz. Das Intervall, das darauf zugreift, bzw. was die Überprüfung in einem bestimmten Zeitraum permanent durchführen soll. Das packe ich einfach um den if-Konstrukt drum herum, und überprüfen möchte ich alle drei Sekunden. Damit wären wir im Großen und Ganzen schon durch, was das Script angeht. Ich speichere ab. Das schauen wir uns nun im Browser an, und sehen hier, es beginnt mit der Ratio-Angabe. Nach einer kurzen Zeit, nach drei Sekunden, erkennt er, dass die Auflösung kleiner als 384 Pixel ist, und entsprechend will er das jeweilige Bild laden. Ich mache etwas größer, dass wir außerhalb der 480 Pixel kommen, und wie man sieht, hört er mit dem Nachladen auf. Wohl gemerkt, das ist selbstverständlich nicht ideal, das ist schon klar, weil Sie würden jetzt auf diese Art und Weise natürlich dreimal im Bild nachladen oder viermal, aber es symbolisiert, wie Sie auf die einzelnen Media-Devices, Media-Queries zugreifen können. Wie man sieht, so passiert gar nichts, und sobald ich auf die 480 Pixel zurückweiche, dann greift genau das Intervall, was wir da programmiert haben. Das Ganze ist nicht beschränkt auf solch eine Angabe, das können wir ein bisschen aufbohren. Ich nehme vor allen Dingen diesen Befehl mit in das Intervall rein, damit das öfters erscheint. Nehmen wir das an die Stelle. Wir können das Ganze noch ein bisschen weiter aufbohren, auch hier nur stellvertretend ist es möglich, nicht auf eine maximale Breite zuzugreifen, sondern hier haben Sie genau die gleichen Möglichkeiten, wie auch bei den Media Queries in den Stylesheets. Das heißt, wenn ich z.B. eine Device-Breite abfragen möchte, "Device With", z.B. 768 Pixel, dann habe ich die Möglichkeit, das Ganze mit einer booleschen Variable zu verknüpfen, und z.B. auch hier die Orientation abzufragen, die bspw. auf einem Porträt liegen sollen. Der Rest bleibt so stehen. Wenn das nun bei 768 Pixel ist, und die Orientaton, d.h. das Hochkantformat bspw. in dem speziellen Device beim iPad, dann soll er ein Bild für 768 Pixel laden. Das speichere ich ab, und schiebe das Ganze auf den Map-Server. Schauen wir uns das mal kurz auf dem iPad an. Ich rufe die jeweilige passende Datei auf, das ist die Media 4 und wie wir sehen, nach einer kurzen Zeit, indem das Intervall greift, erscheint die Information, dass der Browser eine Device-Pixel-Ratio von 1 besitzt. Drehen wir das Ganze noch kurz um und kippen es, erkennen wir nun, dass er nach einer kurzen Zeit, nach einem kurzen Intervall, nun das Bild für 768 Pixel nachlädt, dass der Treffer in der if-Abfrage ist, Porträt und 768 Pixel funktioniert also. Auf dem iPhone läuft es ähnlich ab wie Sie sehen, nur dass die Besonderheit jetzt zu erkennen ist, dass wir eine Device-Pixel-Ration von 2 haben, eben dass Regina-Display von Apple und damit noch mal ein Unterschied zu diesen Ration-Angaben 1 auf dem iPad und auf dem Browser des Screens. Damit haben Sie alle relevanten Möglichkeiten des Responsive-Web-Designs und der Verwendung der Media Queries kennen gelernt, insbesondere der Zugriff auch über die APIs von beispielsweise JavaScript, jQuery wie gesagt funktioniert auf vergleichbare Art und Weise, öffnet Ihnen Tür und Tor für alle möglichen Ansprüche, für alle möglichen Devices und Geräte.

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!