Relative Einheiten

Relative Einheiten haben keinen festen Pixelwert. Du orientierst dich dabei an einem Bezugswert – zum Beispiel an der Schriftgröße eines Elternelements, am html-Element oder an der Bildschirmgröße. So passen sich deine Layouts flexibler an.

Im Gegensatz dazu sind absolute Einheiten wie px immer gleich groß – unabhängig vom Kontext. Mehr dazu im Kapitel Einheiten.

Was sind relative Einheiten?

Der Wert einer relativen Einheit wird zur Laufzeit berechnet. Ändert sich der Bezugswert, ändert sich auch die Größe im Browser.

em

em bezieht sich auf die Schriftgröße des direkten Elternelements. Ist das Elternelement 20px groß, entspricht 1em = 20px und 1.5em = 30px.

1.parent {
2    font-size: 20px;
3}
4
5.child {
6    font-size: 1.5em; /* 30px – bezogen auf .parent */
7    padding: 1em;     /* 30px – ebenfalls bezogen auf .parent */
8}

Hinweis: Bei tief verschachtelten Elementen können sich em-Werte gegenseitig verstärken. Für globale Größen solltest du meist rem verwenden.

rem

rem steht für Root EM und bezieht sich immer auf die Schriftgröße des html-Elements – egal, wie tief ein Element verschachtelt ist. Das macht Größenangaben vorhersehbar.

1html {
2    font-size: 16px;
3}
4
5h1 {
6    font-size: 2rem; /* 32px */
7}
8
9p {
10    font-size: 1rem; /* 16px */
11    margin: 1.5rem;  /* 24px */
12}

• 2rem bei 16px Root-Größe = 32px
• 1.5rem bei 16px Root-Größe = 24px
• Standard in modernen Layouts für Schriftgrößen und Abstände

Prozent (%)

Prozentwerte beziehen sich auf das Elternelement. Bei Breiten bedeutet width: 50%, dass ein Element die Hälfte der verfügbaren Breite des Elterns einnimmt.

1.container {
2    width: 80%;
3}
4
5.box {
6    width: 50%; /* 50% der Breite von .container */
7}

Prozentangaben sind intuitiv und eignen sich gut für flexible Layouts – zum Beispiel Spalten, die du an den Container anpasst.

vw und vh

vw (Viewport Width) und vh (Viewport Height) beziehen sich auf die sichtbare Fenstergröße des Browsers:

• 1vw = 1% der Viewport-Breite
• 1vh = 1% der Viewport-Höhe
• 100vw = volle Bildschirmbreite

1.hero {
2    width: 100vw;  /* volle Viewport-Breite */
3    height: 50vh;  /* halbe Viewport-Höhe */
4}

Viewport-Einheiten eignen sich für Bereiche, die du an die Bildschirmgröße anpassen willst – zum Beispiel Hero-Sektionen oder Vollbild-Hintergründe.