Responsive Webdesign – Grundlagen

Neue Einheiten fürs RWD – rem und vw

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
"em" ist die richtige Einheit für Schriften beim RWD. Allerdings hat em so seine Tücken bei Verschachtelungen. Einfacher wird’s mit der neuen Einheit rem.

Transkript

em ist die richtige Einheit für Schriften beim Responsive Web Design. Allerdings hat em so seine Tücken bei Verschachtelungen. Einfacher wird es mit der neuen Einheit rem. Ich habe hier ein kleines Beispiel gebaut. Das ist ganz einfach, hier gibt es eine Liste und die ist verschachtelt. Das heißt, es gibt hier Unter-Unterpunkte. Die Definitionen per CSS sind ganz einfach, es gibt bei Body, setze ich die Schriftgröße auf 150% Und meine List-Items, denen gebe ich eine Größe von 0,8 em. Wenn wir das jetzt im Browser ansehen, dann zeigt sich aber ein seltsames Phänomen auf den ersten Blick, dass nämlich die untergeordneten Listenpunkte kleiner sind, als die übergeordneten Punkte. Woran liegt das? em ist ja immer relativ zur aktuellen Schriftgröße. Und wenn die Schriftgröße der Liste hier 0,8 ist, dann wird es hier gewählt, wird ausgerechnet. Wenn ich aber dann ein weiteres untergeordnetes Element habe, was auch 0,8 em groß ist, dann ist es 0,8 em der anderen 0,8 und damit wesentlich kleiner. Das sieht man auch wieder schön im Firebug, wenn man das hier einmal anschaut. Und dann hier auf die normale Liste geht und sich anschaut: die sind hier 19,2. Und wenn wir dann auf die Unter-Unterpunkte gehen, dann sind wir bei 15,3667. Das liegt eben an der Verschachtelung. Und das bedeutet, dass wir immer bisschen aufpassen müssen, wenn wir mit em arbeiten, dass so etwas nicht passiert. Es würde natürlich helfen, wenn wir einfach sagen würden, dass einfach die unter-untergeordneten Punkte, welche Schriftgröße sollen die haben: die sollen auch wieder 1 em groß sein. Das wäre die eine Möglichkeit. Oder man könnte natürlich das auch anders organisieren, dass man nicht so einzelne Punkte hier in der Größe angibt. Also, Sie sehen, das hat jetzt hier geklappt. Einfacher wird das Ganze, weil das Problem gar nicht auftritt, mit einer neuen Einheit. Die heißt rem. Und das R heißt sozusagen Route. Also, es ist Route em. Funktioniert genauso wie em, aber es bezieht sich immer auf das Route des Wurzelelementes, Dokumentes, das heißt das HTML-Element. Erster wichtiger Punkt auch bei der Einheit rem: wenn Sie die verwenden, müssen Sie die Bezugsgröße nicht bei Body festlegen, sondern bei HTML. Das habe ich hier einmal gemacht. Ich habe das auf 150 gesetzt und habe dann den List-Item auf 0.8 rem gesetzt. Wenn wir uns dieses Beispiel anschauen, dann sehen Sie: es gibt kein Problem mit Verschachtelungen. Also, das was wir eben bei em extra beheben mussten, wenn wir da nicht eine kleinere Schrift haben, das Problem tritt ja gar nicht auf. Wie schaut es aus mit der Browser-Unterstützung? Gehen wir noch mal kurz hier in den Firefox. Dann sehen Sie, ich habe es jetzt schon aufgerufen, das 'Can I Use'. Rem, das unterstützen alle modernen Browser bis auf Opera Mini, okay. Und der Internet Explorer erst ab Version 9. Was machen wir für den Internet Explorer 8, den wir ja meist schon berücksichtigen müssen und ältere Browser? Für die müssen wir einfach eine alternative Schriftgröße davor angeben. Also, gerade wenn wir so mit flexiblen Schriftgrößen arbeiten, dann ist das Ganze mit rem natürlich wesentlich einfacher, als mit em. Aber bis der IE 8 ganz verschwunden ist, müssen Sie noch eine Fallback-Schriftgröße zusätzlich angeben.

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!