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.

Responsive Webdesign – Grundlagen

Flüssige Schriftgröße

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Beim RWD nutzen Sie Bilder, die sich dynamisch anpassen, auch Videos können Sie dazu bringen. Jetzt fehlt eigentlich nur noch, dass sich die Schriftgröße stets am Viewport orientiert. Genau das geht mit der neuen Einheit vw.

Transkript

Beim RWD haben wir Bilder, die sich flüssig anpassen. Auch Videos können wir dazubringen. Jetzt fehlt eigentlich nur noch, dass sich die Schriftgröße immer am Viewport orientiert. Und genau das geht mit der neuen Einheit 'vw'. Ich habe hier mal ein Beispiel gebaut. Und wir wollen es uns gleich im Browser ansehen. Und wenn ich das hier anschaue und mal größer mache, dann sehen Sie: die Schrift passt sich immer an, an die Größe des Browserfensters. Das ist möglich mit dieser neuen Einheit vw. Und das bezieht sich: V ist Viewport und W ist Width, also, auf die Breite des Viewports. Das habe ich jetzt hier für die h1-Überschrift so festgelegt. Auch die h2-Überschrift, die hier unten im Text vorkommt, hat so eine flexible Einheit. Man kann das natürlich auch für Abstände nehmen oder alternativ natürlich auch Abstände mit em definieren. Derzeit gibt es aber noch ein kleines Problem. Wenn ich mal jetzt von einem sehr kleinen Viewport ausgehe, dann sehen Sie: wird die Schrift natürlich unlesbar klein. Das heißt, man sollte in so einem Fall noch eine Mindestschriftgröße festlegen. Das ist eigentlich so per se nicht vorgesehen, aber Sie können das natürlich über Media Queries machen. Ich habe jetzt hier einmal angegeben, dass eben bei kleinen Bildschirmen die Schriftgröße für die Absätze auf 16 Pixel gesetzt wird. Und wenn wir das dann hier anschauen, dann sehen Sie: bei kleinen wird die Schrift nicht einfach kleiner, sondern hat irgendeine vernünftige Größe. Bei allen neuen Sachen stellt sich natürlich die Frage der Browser-Unterstützung. Das schaut eigentlich relativ gut aus, bisschen durchwachsen noch. Also, es ist im Internet Explorer erst ab Version 9 da. Das heißt, für den 8 brauchen wir auf jeden Fall eine Fallback-Größe, was beispielsweise eine Pixel-Angabe wäre. Firefox kann es, Chrome hat aber derzeit so einen Bug, dass die Anpassungen immer erst stattfindet, wenn man das dann neu lädt, nicht während man das Browser-Fenster so verändert, deswegen sieht man das nicht so. Opera, was natürlich problematisch ist, ist außerdem dass die Android- Browser das auch noch nicht können. Das heißt, wir brauchen eine Fallback-Schriftgröße, die wir unbedingt hier angeben müssen. Wir haben uns im Beispiel vw angeschaut. Das bezieht sich auf die Viewport-Width, also die Breite. Es gibt noch vh für Viewport- Height, für die Höhe des Viewports. Und es gibt vmin und vmax immer für den Wert, der kleiner oder größer ist. Also, eine schöne Einheit, die man natürlich einfach im Responsive Web Design für fortgeschrittene Browser nutzen kann, um einen kleinen Hinkocker zu haben, beispielsweise bei einer Überschrift.

Responsive Webdesign – Grundlagen

Lernen Sie die Hintergründe von Responsive Webdesign kennen und sehen Sie, wie sich über diese Technik Webinhalte auf den unterschiedlichsten Geräten gleichwertig anzeigen lassen.

5 Std. 47 min (59 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!