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

HTML5 Grundkurs

Medienabfragen

Testen Sie unsere 2019 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Eine Website gehört für verschiedenste Endgeräte optimiert und somit auch für unterschiedliche Bildschirmauflösungen. Mit einer Medienabfrage, einem neuen Feature von CSS3, ist es möglich, CSS-Stile abhängig von bestimmten Kriterien, etwa der Größe des Anzeigebereichs, anzuwenden.
07:06

Transkript

Die Suchen von Websites haben heutzutage sehr, sehr, sehr unterschiedliche Bildschirm-Auflösungen - vom riesigen 30 Zoll Monitor bis hin zum kleinen Handy-Display. Jetzt gibt es da verschiedene Taktiken und Ansätze, wenn man damit umgeht. Häufig sieht man mobile Websites für kleine Geräte und für große Bildschirme dann eben eine andere Variante, aber selbst das mit großem Bildschirm ist es kniffelig. Auf einem Monitor mit einer sehr, sehr großen Auflösung klappt das Layout, das vielleicht auch bei 1024 X 768px gut aussieht, nicht mehr so ganz. Etwas, was häufig eine gute Idee ist, aber eben nicht immer. Das muss ich gleich vorweg sagen, sind Media Queries, ein CSS3-Feature, was aber in modernen Browsern bereits unterstützt ist. Die Idee dahinter ist relativ einfach. Wir haben CSS-Anweisungen, die abhängig sind von der größeren Browser-Fensters. Sehr, sehr simple, geniale Idee und einfach, um zu setzen, hat sogar ein bisschen was mit der Programmierung zu tun obwohl es CSS ist. Ich will das relativ simple darlegen und zwar nenne ich das einfach media.html für Media Queries. So bezeichnet man das. Und ich habe einfach ein div-Element, einen "Kasten" , und dieser Kasten, der soll durch Media Queries entsprechend angepasst werden, also, "Darstellung abhängig von Browsergröße" Machen wir das mal, indem wir eine entsprechende CSS-Regel erstellen: style und als style greifen wir auf den Kasten zu. Und wir haben Kriterie eine Breite, ich nenne 300px und eine Höhe 200px, und einen Border 1px solid, nehmen wir mal Farbe orange. Das sieht jetzt eigentlich relativ gut aus. Wir können es, ja, mal entsprechend aufrufen im Browser und dann hier auf die media.html Seite gehen. Na ja, sieht hier ganz toll aus. Nein, natürlich nicht gut designt, aber vom Prinzip her passt es. Aber wenn Sie jetzt vorstellen, dass der Browser deutlich größer wäre, dass wir eine größere Auflösung zum Beispiel hätten, dann wird es vielleicht doch ein bisschen klein und würden die Schrifte dann vielleicht doch sehr, sehr klein zu lesen und das kleiner dargestellt wird. Ich simuliere es mal, indem ich zum Level anpasse, vielleicht nicht so gut. Bei einer größeren Auflösung sollte die Schrift vielleicht ein bisschen größer sein, und vielleicht auch der Kasten eine andere Größe haben. Und das lässt sich eben mit Media Queries realisieren und zwar läuft das, wie folgt. Wir identifizieren einfach mehrere Fälle: Eine Auflösung oder ein Layout für große Bildschirme, eins für mittlere und eins für kleine. Es gibt dazu die @media-Anweisung in CSS, die nimmt man zum Beispiel gerne hier, um beispielsweise Druckansichten zu implementieren, gibt also spezielle CSS-Stile an, wenn etwas gedruckt wird. Es ist Standardtechnik, ist jetzt auch nichts besonderes Neues. Aber wir können das auch dazu verwenden, ja, ein bisschen zu programmieren und verschiedene Stil-Anweisungen einzugeben, und zwar geht es, wie folgt. Ich gebe nach @media einfach die Bedingung an für die folgenden Stilangaben. Der Kasten soll 300px groß sein und 200px Höhe haben etc., wenn wir eine Auflösung von, ich sage mal, unter 700px Breite haben. Also, max width, so heißt nämlich die entsprechende Anweisung, sollen dann 700px sein. Und dann geschweifte Klammern {}, packe ich das hier direkt rein. Und jetzt werden diese Stile tatsächlich nur angewandt, wenn ich exakt maximal 700px habe. Dadrüber wird was Anderes angewandt. Dass dadrüber das kann ich auch analog angeben, also @media min width, dass dann das Gegenstück, wenn ich also mindestens 701px habe, dann wird der Kasten deutlich größer, also zum Beispiel, width, sagen wir mal, 650px, height 400px, auch da könnte man sich natürlich ja einen relativen Wert überlegen. Und außerdem ist der Rahmen, ja, vielleicht etwas dicker 500px dotted blue und font-size könnte man auch noch entsprechend anpassen. mal large, auch hier natürlich sind relative Werte sinnvoll. Ja, und dann haben wir noch vielleicht die kleinen Auflösungen. Also, wenn ich an meiner maximal Breite von, sagen wir mal, 350px habe, dann wird der Kasten, ja, noch kleiner dargestellt, wird langsam, ja, schwierig, deswegen sage ich einfach mal display: none Ja, also, wenn wir weniger als 350 oder kleiner gleich 350px Breite haben, dann zeigen wir den Kasten gar nicht erst dann. Könnte er, zum Beispiel,Werbung enthalten, die auf dem Smartphone gar nicht geht. Ich kann hier auch boolesch programmieren, denn ich will, ja, diese Regeln hier eigentlich nur für den mittleren Fall, also nicht ganz großer, aber auch nicht ganz kleiner Bildschirm anwenden. wird diese Regel aber auch für eine Breit von 300px gelten, das heißt, wir müssen eigentlich zwei Voraussetzungen haben, nämlich wir müssen auch sagen, die minimale Breite sind 351px, weil bis 351px haben wir je weitere Regeln. Und diese beiden Bedingungen kann ich boolesch verknüpfen, Kann also so was sagen, wie and. Ja und jetzt sieht es doch direkt aus, wie Programmierung. Ein Überblick. Wir sagen,wenn wir mindestens 701px Breite haben und dann blau gepunktete Linie, großer Kasten, zwischen 351 und 700 px haben wir orange , 300X200 der Kasten, und unter 350px oder kleiner gleich 350px haben wir gar keinen Kasten. Speichern wir ab! Gehen zum Google Chrome! Rufen es wieder auf! Und jetzt haben wir hier den blauen Kasten, sind also von der Breite her entsprechend immer noch innerhalbe dieser Maßgabe machen sie jetzt ein bisschen kleiner, sind jetzt im Fall orange, das heißt, wir sind jetzt unter halb von, sehen Sie im Hintergrund, 780px Breite. Und jetzt hier ist der Grad 350px, denn hier verschwindet der Kasten. Jetzt kommt er, wir gehen auf 700 und das ungefähr hier, und jetzt ist der Kasten entsprechend blau, das heißt, wir können davon ausgehen, dass die Auflösung dieses Bildschirms hier wahrscheinlich irgendwas mit 720px Breite hat zunächst in der gewählten Darstellung. Ich habe noch den Zoom-Faktor von vorher drin gehabt, das heißt, wir sehen hier, warum diese Pixle-Einstellung immer nur relativ zum Zoom-Faktor sind. Jetzt habe ich also eine normale 100% Auflösung, habe ich zurückgeschaltet, und jetzt sehen wir "blauer Kasten", "blauer Kasten" Und, ja, hier sind ungefähr dann tatsächlich die 700px, und hier sind die 350px. Und Sie sehen, das passt sich wirklich dynamisch an, und eben analog, lassen sich Druckauflösungen realisieren. Und wenn wir jetzt dann tatsächlich auf die wirkliche Auflösung gehen, die wir haben, dann könnte man sich tatsächlich überlegen vielleicht noch einen vierten Analogsfall zu machen oder mit relativen Werten zu arbeiten. Das ist ein komplettes Thema für sich, aber Sie sehen auch, von der Anprogrammierung sozusagen geht es relativ einfach. Man entwickelt die verschiedenen Stile für die verschiedenen Auflösungen und gibt diese dann per Media Query einfach an.

HTML5 Grundkurs

Machen Sie sich mit HTML5 fit für das Webdesign von morgen, angefangen vom Erstellen einfacher HTML-Dokumente bis hin zur Gestaltung anspruchsvoller Layouts.

3 Std. 11 min (29 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!