CSS-Einheiten

CSS-Einheiten legen fest, wie Größen auf Webseiten definiert werden, z. B. Schriftgröße, Breite oder Höhe. Es gibt zwei Hauptkategorien: absolute und relative Einheiten.

Absolute und relative Einheiten

Absolute Einheiten sind feste Werte, die auf allen Geräten dieselbe Größe haben (z. B. px oder cm). Relative Einheiten passen sich hingegen der Umgebung an, z. B. an die aktuelle Schriftgröße oder die Fenstergröße des Browsers.

Einheit	Typ	Beschreibung
px	Absolut	Pixel, die am häufigsten verwendete absolute Einheit in der Webentwicklung.
cm	Absolut	Zentimeter, selten verwendet, hauptsächlich für den Druck.
mm	Absolut	Millimeter, ebenfalls eine Einheit für den Druck.
em	Relativ	Einheit relativ zur Schriftgröße des aktuellen Elements.
rem	Relativ	Einheit relativ zur Schriftgröße des Wurzelelements (<html>).
%	Relativ	Prozentwert relativ zur Größe des Elternelements.
vh	Relativ	Entspricht 1% der Höhe des Browserfensters.
vw	Relativ	Entspricht 1% der Breite des Browserfensters.

Praktische Verwendung von CSS-Einheiten

Sehen wir uns einige Beispiele an, wie absolute und relative Einheiten in der Praxis funktionieren.

In diesem Beispiel erhält ein Absatz eine absolute Schriftgröße (px), der andere eine relative (em).

In diesem Beispiel beträgt die Breite einer Box 50 % des Elternelements, die Höhe 50 % der Höhe des Viewports.

Viewport-basierte Einheiten

Viewport-Einheiten passen sich an die Größe des Browserfensters an. 100vw entspricht der gesamten Breite, 100vh der gesamten Höhe. Dies ist besonders nützlich für Vollbildbereiche.

Vergleich von em und rem

em bezieht sich auf die Schriftgröße des aktuellen Elternelements, während rem sich immer auf das Root-Element (html) bezieht. Daher können 2em und 2rem unterschiedliche Größen ergeben.

Kombination von Einheiten

In der Praxis kombinieren wir oft relative Einheiten: Zum Beispiel kann eine Box 80 % breit und 60vh hoch sein, mit einem inneren Element, das 50 % Breite und Höhe hat.

Tipps zur Verwendung von CSS-Einheiten

Die richtige Verwendung von Einheiten ist entscheidend für responsive und benutzerfreundliche Webseiten.

Bevorzuge für responsives Design relative Einheiten (em, rem, %, vh, vw).
Vermeide zu viele feste px-Werte, da dies auf kleineren Bildschirmen schwer lesbar sein kann.
Für den Druck verwende eher absolute Einheiten (cm, mm, in), da diese genauer sind.