Aufgaben zu Font Size
Hier findest du Aufgaben zu den Einheiten px, em, rem und vw.
Sie sind in einfach, mittel und schwer eingeteilt.
Pixel (px) – Aufgaben
1. (Einfach)
Erstelle einen Text, der genau 20px groß ist.
2. (Mittel)
Erstelle drei Wörter mit jeweils unterschiedlichen Pixelgrößen
(z. B. klein, mittel, groß).
3. (Schwer)
Erstelle eine kleine Infobox, in der Überschrift und Text jeweils andere Pixelgrößen haben.
em – Aufgaben
4. (Einfach)
Erstelle einen Satz mit der Schriftgröße 1.5em.
5. (Mittel)
Lege einen Container mit font-size: 20px an
und darin einen Text mit 2em.
Beobachte, wie groß er wird.
6. (Schwer)
Erstelle ein verschachteltes Layout (Element in Element),
in dem sich durch mehrere em-Werte die Größe verändert.
rem – Aufgaben
7. (Einfach)
Erstelle einen Text mit 1.2rem.
8. (Mittel)
Erstelle drei Absätze mit 1rem, 1.5rem und 2rem.
9. (Schwer)
Baue ein kleines Layout, in dem Überschrift, Zwischenüberschrift und Text
nur mit rem formatiert werden (keine px, keine em!).
vw (Viewport Width) – Aufgaben
10. (Einfach)
Mache einen Text mit der Größe 5vw.
11. (Mittel)
Erstelle zwei Überschriften, die mit vw reagieren
(z. B. 6vw und 8vw).
12. (Schwer)
Erstelle eine „Hero“-Überschrift, die sich dynamisch an die Bildschirmbreite anpasst
und gleichzeitig noch normaler Text daneben steht.