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.
Welche Einheit ist relativ zur Standardschriftgröße?
✨ Frag Lara — deine KI-Lernpartnerin
Entsperre personalisierte Lernunterstützung. Lara kann Lektionen erklären, Themen zusammenfassen und deine Lernfragen beantworten — verfügbar ab dem Go-Tarif.
Lara hilft dir, schneller zu lernen — exklusiv für ReadyTools Go-, Plus- und Max-Mitglieder.
