Größen und Einheiten
Im echten Leben haben wir mit verschiedenen Größeneinheiten wie "cm", "Inch" oder "fuß" zu tun. Diese Einheiten beschreiben alle eine Längenangabe.
Weil wir beim Webdesign auch mit verschiedenen Einheiten konfrontiert werden, schauen wir uns diese etwas genauer an, um damit besser umgehen zu können. Wenn wir in CSS Werte mit Einheiten definieren, dann werden diese grundsätzlich zusammen geschrieben. Also es steht kein Leerzeichen zwischen der Zahl und der Einheit. Wenn ein Wert "0" ist, dann wird er auch nur mit "0" bezeichnet, ohne eine Einheit anzugeben denn "0" ist "0".
Pixel / px
Ein Pixel ("px" geschrieben) ist ein Bildpunkt und hat nie die gleiche Größe.
Bei einem Monitor mit einer Auflösung von "1024 x 768" Pixel gibt es "786.432" Pixel (Bildpunkte) auf einer Bildschirmfläche. Ein Monitor mit der gleichen Bildschirmfläche kann aber auch eine Auflösung von "1920 x 1080" Pixel haben. Das sind "2.073.600" Pixel auf der gleichen Fläche.
emm / em
Die Einheit "em" wird emm gesprochen und hat nichts mit dem <em> Element aus HTML zu tun.
Die Einheit "em" ist relativ zur Schriftgröße, das bedeutet das eine vom Benutzer verwendete Schriftgröße von "16px" genau einer Einheit "em" entspricht. "16px" = "1em".
Bei der Verwendung ist unbedingt zu beachten, dass sich die Größe immer auf das Elternelement bezieht.
Für ein einfaches Beispiel erweitern wir unsere HTML-Datei um 2 ineinander verschachtelte <div>-Elemente.
<body>
...
<div>Text01
<div>Text02
</div>
</div>
</body>
Die Zeilen "Text01" und "Text02" sollten im Browser zu erkennen sein.
In CSS deklarieren wir das Element <div> mit einer Schriftgröße von "2em".
div {
font-size: 2em;
}
Der Bereich "Text01" hat im Gegensatz zu seinem Elternelement (<body>) die doppelte Größe erhalten.
Der Bereich "Text02" hat auch die doppelte Größe von seinem Elternelement erhalten.
Dieser Effekt kann erwünscht sein, ist aber auch schwierig zu Händeln.
root emm / rem
Wer nicht auf relative Größen verzichten, aber auch die Kontrolle über die Kindelemente behalten möchte, der kann auf die Einheit "rem" zurückgreifen.
Die Einheit "rem" bezieht sich nicht wie em auf das Elternelement, sondern auf das Stammelement <HTML> und ist dadurch viel besser zu berechnen.
div {
font-size: 2rem;
}
Prozent / %
Die Einheit "%" bezieht sich genau wie die Einheit "em" auf das Elternelement.
div {
font-size: 200%;
}
Weiter mit Verschieben und positionieren