Mittels CSS lassen sich vielerlei Anpassungen vornehmen. Sei es das Ändern von Schriftfarbe, -größe, Abständen von Elementen oder noch vielem mehr. Heute geht es darum, Ihnen einen Einblick in die verschiedenen Größeneinheiten innerhalb von CSS zu geben.
Inhalt
Absolute Größen
Px (Pixel)
Bei „px“ handelt es sich um eine der meistgenutzten Einheiten im CSS. Sie gilt beinahe schon als Grundmaß und hat sich somit als Standard etabliert. „px“ wird Ihnen also immer wieder begegnen und sicherlich haben Sie den Begriff schon das eine oder andere Mal gehört.
Für ganz Interessierte haben wir eine Erklärung, wie genau „px“ berechnet werden.
Zum Verständnis vergleichen wir die anderen Größen mit „px“.
(Die 20px stehen nicht im Verhältnis zu dieser Website. Die Screenshots stehen im Verhältnis zueinander.)
in (inch), cm (Zentimeter), mm (Millimeter)
Diese Maßeinheiten sind genau das, wonach sie sich anhören: Maßeinheiten, wie Sie sie aus dem analogen Leben kennen. In Benutzung sieht man sie selten, da sie alle lediglich in „px“ umgerechnet werden und keine weiteren Zweck besitzen.
1in = 96px
1cm = 37.8px
1mm = 3.78px
pt
„pt“ steht für „Points“ oder im Deutschen für „Punkt“, was außerhalb von CSS im Druck und Webdesign sehr geläufig ist. Daher wurde es auch für CSS übernommen. Bei der sogenannten print.css, die eine Website für den Druck anschaulich macht, kann diese Einheit besser als „px“ genutzt werden. Das kommt daher, dass „px“ von unterschiedlichen Druckern genau wie von unterschiedlichen Geräten verschieden ausgegeben werden.
pc
„pc“ steht für „Pica“ und hat den selben Hintergrund wie pt.
Der einzige Unterschied ist:
1pc = 12pt
Relative Größen
em
„em“ orientiert sich an einer bereits angegebenen Schriftgröße (font-size).
1em = 100% der Originalschrift
0.5em = 50% der Originalschrift
2em = 200% der Originalschrift
So kann man z.B auch die Zeilenhöhe (line-height) auf das 1.5fache einer Schrift stellen:
line-heigt: 1.5em;
rem
„rem“ verhält sich wie „em“, es geht lediglich von der Schriftgröße (font-size) des Root-Elementes aus. Das ist in den meisten Fällen das „html“-Element. Demnach kann man die komplette Website von dieser einen Schriftgröße im „html“ abhängig machen. Wird sie geändert, ändern sich alle „rem“ im Verhältnis.
ex
„ex“ wird selten genutzt, sein Nutzen lässt sich aber leicht erklären. Wie der Name „ex“ (oder auch „x“) symbolisiert, orientiert sich diese Größenangabe relativ zu der Höhe des kleinen Buchstaben „x“. Dieser ist im Gegensatz zu z.B. dem „b“ oder „p“ die quasi kleinste Größe der Schrift, da es keine überstehenden Striche besitzt. „ex“ variiert dementsprechend mit dem Ändern einer Schriftart, da verschiedenen Schriftarten unterschiedlich hoch sein können.
ch
„ch“ orientiert sich relativ zu der Breite des Buchstaben „0“ (Null). Auch diese Größe ändert sich mit der Schriftart. Wozu genau man es nutzen kann, wird sich ggf. zeigen.
vw (view-width) und vh (view-height)
„vw“ orientiert sich an der Breite des Browserfensters, unabhängig von der Breite des Elementes, in dem Sie sich befinden. Je breiter das Browserfenster, desto größer wird die Schrift.
1vw = 1% der Browserbreite
„vh“ orientiert sich an der Höhe des Browserfensters, unabhängig von der Höhe des Elementes, in dem Sie sich befinden. Je höher das Browserfenster, desto größer wird die Schrift.
1vh = 1% der Browserhöhe
vmin und vmax
1vmin kann 1vw oder 1vh sein, je nach dem, was aktuell kürzer ist. In dem Beispiel unten sehen Sie, dass der obere Text, der 1vmin groß ist, verändert, sobald die kürzere Seite geändert wird.
1vmax kann 1vw oder 1vh sein, je nach dem, was aktuell länger ist. In dem Beispiel unten sehen Sie, dass der obere Text, der 1vmax groß ist, verändert, sobald die längere Seite geändert wird.
