HTML und CSS für Designer

Media Queries und die Einbindung in CSS

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Media Queries klingen kompliziert, sind in Wirklichkeit aber nur simple Abfragen von Auflösungswerten. Sind diese Werte ermittelt, teilt man dem HTML-Dokument mit für diese Auflösung passenden CSS-Anweisungen mit, wie es sich zu verhalten hat.

Transkript

Die Umsetzung von der Vorlage aus InDesign in ein funktionstüchtiges Onlinemagazin, dass hat mit CSS und HTML hervorragend funktioniert. So, damit brauchen wir dieses Dokument in InDesign eigentlich nicht mehr, und ich beende das Programm einfach. Speichern brauchen wir es auch nicht. So, und gucken wir uns das Onlinemagazin noch einmal an. Das klappt auch so weit, wenn da jetzt nicht noch eine Kleinigkeit wäre. Wir haben alles schon vorbereitet für die responsive Unterstützung, also das responsive Design. Und das klappt auch eigentlich ganz gut. Nur, wenn ich jetzt so klein wäre, dass ich selbst vom kleinsten Desktop-PC, wo man sagen kann, das geht noch, aber z.B. auf eine Tabletgröße komme - jetzt wird schon deutlich,was passiert - oder, noch schlimmer, mir das Ganze mit einem Smartphone anschaue, dann sieht man hier, dass das nicht sein kann. Also das ist alles andere als schön, und vor allen Dingen, ja, sogar gar nicht lesbar. Und das bedeutet, ich muss jetzt die Möglichkeit haben, abfragen zu können, auf welcher Auflösung man sich gerade befindet. Und auch dort gibt es mit CSS natürlich die Möglichkeit das Ganze passend umzusetzen. Die Rede ist von den sogenannten Media Queries. Das ist ein recht komplizierter Teil. Ich geh mal an das Ende des Dokumentes, meiner style.css Datei. Und da kann man unendlich viel drüber erklären und sagen. Wichtig ist aber hier auch erstmal, dass man das Grundprinzip versteht. Und deswegen bezeichne ich das auch mal genau so, nämlich als Einstieg in das responsive Design. Ok. Was müssen wir machen? Wenn wir ein Dokument haben, dann ist es ja ganz stark davon abhängig mit welchem Ausgabemedium ich mir das betrachte. Also, mit welchem Mobile Device beispielsweise. Und wie gesagt, Media Queries, die leite ich nun ein, indem ich hier das @-Zeichen, und dann media schreibe. Und jetzt muss ich ihm erstmal mitteilen, auf welchem Medium generell das denn geschehen soll. Und da ist die übliche Angabe das @media screen. Ich rufe mal den Browser auf, und geh mal hier in SelfHTML Wiki. Und gebe hier mal den Befehl @media ein. Suchen wir mal danach. Und da sieht man, er findet auch direkt Media Queries. Schauen wir uns das an, das ist schon ein Riesendokument, was hier jetzt alles drüber zu finden ist. Relevant ist erstmal vielleicht das hier, Gruppierung, Medientypen. Das hab ich gesucht. So, und da sieht man, der Medientyp selber, ist der screen. Nämlich alle Computerbildschirme. Aber da gibt es noch ein paar andere. Nämlich zum Beispiel so etwas wie print. Bedeutet also, der Befehl @media ist nicht nur für unterschiedliche Auflösungen gedacht, sondern zum Beispiel auch für die Ausgabe auf einen Drucker. Wenn ich das jetzt mache, dann kann ich z.B. später sagen, dass die Überschrift mir bei dem Ausdruck hier, zu groß oder zu klein ist, oder ich gar ganze Objekte komplett ausblenden möchte. Wie dem auch sei, sie sehen, hier gibt es jede Menge, auch über solche Nachschlagewerke, noch nachzulesen. Aber zunächst einmal, wie baue ich das Ganze nun weiter ein, bzw. wie trage ich das hier bezüglich der Auflösungen ein. So, ich sage ihnen als erstes, dass das ein Bildschirm ist. Und als zweites muss ich eine Größenangabe vergeben. Und das geschieht am allerbesten, da gibt es auch mehrere Varianten, aber ich würde ihnen empfehlen, nehmen wir für den Anfang die Maximalbreite, max-width. Und jetzt tragen sie ein, ab wann sie reagieren wollen. Also ab einer Maximalbreite von, in Anführungsstrichen, nur soundso viel Pixel, führe bitte aus, das, was ich jetzt hier drunter schreiben werde. Ich nehme jetzt einfach mal einen Wert, 500 Pixel. Nur mal als Beispiel. So. Und jetzt muss ich eine geschweifte Klammer hier dahinter öffnen, und alles was nun hier hinein kommt, das betrifft die Angabe, die ab 500 Pixel Maximalbreite stattfinden soll. Jetzt muss man so ein bisschen verkehrt herum denken. Maximalbreite 500 Pixel bedeutet, dass es von 0 bis 500 geht. Ist die Maximalbreite erreicht, dann gilt etwas anderes. Und in dem Falle, so wie es jetzt hier steht, dass was hier im Vorfeld geschrieben ist. Denn hier im Vorfeld in dem CSS Dokument, ja das ist quasi die Basis, das gilt grundsätzlich. Wenn ich jetzt eine Maximalbreite von 500 eingebe, dann gilt das nur für diesen Bereich, und überschreibt dann das, was hier oben passiert. Ich mach jetzt mal folgendes, ich nehm hier mal einfach den Footer raus und überschreibe die Definition des Footers. Hier sehen wir das hier unten auch. Und da haben wir eine background-color, von grau. So. Wenn ich etwas 1:1 übernehmen möchte, wie zum Beispiel jetzt so was. Das kann ich mir sparen. Denn diese Einstellung, die gilt bereits. Ich muss also hier nur etwas reinschreiben, was dann gelten soll, wenn eine Breite von unter 500 Pixel erreicht ist. Und ich sag jetzt mal, dann soll das rot werden. So, mit einem Semikolon. Also, zum Verständnis: Das was oberhalb steht, gilt immer, bis dieser Zustand erreicht wird. Nämlich ein Medium, Bildschirm, und die Breite bis maximal 500 Pixel. Alles was größer ist, gilt das hier, alles was kleiner ist, gilt das hier. Ja, gucken wir uns an, was da passiert. Ich öffne mal die Datei wieder, aus der Website. So, bis dahin noch ganz normal, und wir haben grau. Und jetzt werden wir mal ein bisschen kleiner. Und ab 500 Pixel, jetzt sieht man das nicht mehr so gut, muss das irgendwann...da war es. Haben sie es gesehen? Da ist es. Da wird es rot. Und genau das ist der Übergang, das sind die 500 Pixel. Und sie sehen, so einfach ist das Prinzip der Übernahme von Media Queries. Und jetzt muss ich mich nur darum kümmern, dass ich weiß, welche Größenordnungen gibt es denn. Das ist nicht der 500 Pixel Bereich. Da gibt es so verschiedene Anpassungen. Also zum Beispiel Smartphones in Portrait Ausrichtung, ältere Smartphones haben 320 Pixel, Smartphones in horizontaler Ausrichtung haben 480 Pixel, kleine Tablets 600, Tablets, wie das iPad zum Beispiel, 768. Und das nehme ich jetzt einfach mal als erste Größe. Nämlich 768. Jetzt möchte ich nicht den Footer in der Form, dass ich die Hintergrundfarbe verändern will, sondern ich möchte den Footer eigentlich gar nicht anpassen, sondern die Überschrift. Die soll kleiner werden. Also nehme ich hier h3, und dann schreibe ich einfach rein, font-size. Ich überschreibe die Schriftgröße, und die setz ich mal auf 1rem. Und das Gleiche mach ich nun noch mit dem Footer, h3 span, das muss ja das passende Verhältnis sein. Und damit setze ich das auf 0.5rem. Ja, und jetzt können wir uns anschauen, was passiert. Das ist die normale Größe, jetzt werde ich kleiner, und ab einer bestimmten Größenordnung wird das kleiner. Ach, ich habe das Dokument nicht aktualisiert. So. Jetzt sieht man es auch richtig gut. Achten sie darauf, jetzt werde ich irgendwann über die 768 Pixel kommen, und zack, da ist es größer geworden. Ja, und ich denke das verdeutlicht das Prinzip, wie ich nun vorgehen kann, um mir für die restlichen Objekte in meinem Dokument sämtliche Größen anzupassen.

HTML und CSS für Designer

Steigen Sie als Designer ein in HTML und CSS. Sie gestalten ein responsives Reisemagazin und erleben dabei, dass der Workflow beim Gestalten nicht anders ist als gewohnt.

3 Std. 9 min (39 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!