Paragraph mit regulärer Größe.
Paragraph mit veränderter Größe.
Paragraph mit veränderter Größe und verschachteltem Element.
Wir schauen uns die verschiedenen Größeneinheiten an indem wir
die Schriftgrößen (font-size) verändern.
Verändere zunächst die Schriftgröße des body-Elements.
Gib einige Werte in pt und px an.
Ist es sinnvoll diese Einheiten zu benutzen?
Deine Antwort: Die Einheiten pt (points) und px (pixels) sind absolute Maßeinheiten. Ein Punkt (pt) ist 1/72 eines Zolls, während ein Pixel (px) die kleinste Anzeigeeinheit auf einem Bildschirm darstellt. Die Verwendung von px ist für Webdesign üblich, da sie es erlaubt, präzise Layouts zu gestalten, die auf den meisten Geräten gleich aussehen. Die Verwendung von pt ist eher für Druckmedien geeignet. Da Bildschirmauflösungen variieren können, können Designs, die in pt oder px angegeben sind, auf verschiedenen Geräten unterschiedlich aussehen, was bei responsiven Designs problematisch sein kann.
a. Gib nun einen Prozent-Wert für die Schriftgröße an. Worauf beziehen sich die Prozente?
Deine Antwort: Prozentwerte (%) für Schriftgrößen beziehen sich auf die Schriftgröße des übergeordneten Elements. Wenn für ein Element eine Schriftgröße von 150% angegeben wird, wird diese Schriftgröße 150% der Schriftgröße des Elternelements betragen.
b. Gib nun einen Wert in em an.
Wie berechnet sich die Schriftgröße aus dem em-Wert?
Deine Antwort: Die Einheit em bezieht sich auf die Schriftgröße des Elternelements. Wenn ein Element eine Schriftgröße von 2em hat, ist seine Schriftgröße das Zweifache der Schriftgröße seines Elternelements.
c. Verdoppele nun die Schriftgröße der Elemente der Klasse resized.
d. Im zweiten Paragraph befindet sich ein verschachteltetes strong-Element.
Halbiere die Schriftgröße dieses Elements indem du einmal die Einheit
em und % benutzt. Worauf beziehen sich die beiden Einheiten?
Deine Antwort: Wenn em verwendet wird, bezieht sich die Einheit auf die Schriftgröße des unmittelbaren Elternelements. Im Falle von % bezieht sich der Wert ebenfalls auf die Schriftgröße des unmittelbaren Elternelements. Zum Beispiel würde 0.5em oder 50% die Schriftgröße auf die Hälfte der Größe des Elternelements setzen.
e. Was passiert wenn du anstatt von em die Einheit rem benutzt.
Worauf bezieht sich nun die angegebene Einheit?
Deine Antwort: Die Einheit rem (root em) bezieht sich auf die Schriftgröße des Wurzelelements (html). Dies bedeutet, dass unabhängig von der Schriftgröße des Elternelements alle rem-Werte auf die Schriftgröße des html-Elements bezogen werden. Das macht rem besonders nützlich für ein konsistentes Layout über verschiedene Komponenten einer Webseite hinweg.