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.

HTML und CSS für Designer

Größen- und Abstandsanpassungen für verschiedene Auflösungen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Objektanpassungen demonstriert dieses Beispiel der Schriftformatierung für die unterschiedlichen Auflösungen eines Smartphones, eines Tablets und eines Desktoprechners.

Transkript

Die Angabe des Footers, und die Anpassung des Footers auf die Auflösungsgröße muss nun noch für den restlichen Teil des Dokumentes übernommen werden. Das betrifft einmal die Überschrift, als auch sämtliche Unter-Überschriften. So, ich muss mir genau den Sektor rauspacken den ich überschreiben möchte. Das ist h1, und entsprechend fange ich damit an. Und hier haben wir die Font-Größe, und ich mach das jetzt folgendermaßen, ich spar mir das, und kopiere einfach nur diese Einträge, denn die brauche ich jetzt ja, mehrmals. Kopiere die rein, aber das ist dann nicht h3, sondern h1. Und das gleiche gilt dann hier unten, auch mit h1. So, und jetzt soll das nicht ganz so klein werden das heißt die erste Anpassung, footer h1, nehm ich auf 3rem. Und footer h1 span auf 1.5rem. So, und dann bleibt mir nur noch der letzte im Bunde, das ist die Section h2. Und, jetzt hab ich auch footer hier hingeschrieben, hier muss der header hin, selbstverständlich. Nicht footer, sondern der header. Also header h1, das entspricht dann dieser Überschrift, und der span-Bereich, hier unten, den footer haben wir schon. Dann bleibt noch die Section über. Und Section, spreche ich jetzt nur die h2-Überschrift an, und die soll dann eben auch mit font-size: 1.5rem daherkommen. So, und damit habe ich den kompletten Block der Media Queries, für Auflösungen, die kleiner-gleich 768 Pixel sind. Alles was größer ist, sieht so aus, wie oben beschrieben, und das entspricht dem Dokument. Und wenn ich jetzt kleiner werde, dann kommt irgendwann der Zeitpunkt, zack, wo die Schrift kleiner wird. Ja, und Sie merken, somit habe ich jetzt die Möglichkeit auch auf Smartphones und kleinen Auflösungen mir das Ganze perfekt anzuschauen und durchzulesen. Und damit haben wir theoretisch gesehen schon das Wichtigste und den größten Aufwand für das responsive Design umgesetzt.

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!