CSS-Einheiten

Du kannst schon eine Deklaration wie color: teal schreiben. Größen-Eigenschaften brauchen eine zweite Idee: wie groß. font-size: 16 allein ist für die meisten Längeneigenschaften ungültig — der Browser braucht eine Einheit, damit klar ist, was „16“ bedeutet.

Was sind CSS-Einheiten?

CSS-Einheiten sind die Maß-Endungen an Längenwerten — zum Beispiel px, rem, %, vw und vh. Absolute Einheiten bleiben unabhängig vom Elternteil gleich groß. Relative Einheiten skalieren mit etwas anderem: der Schrift des Elements, der Root-Schrift, der Elterngröße oder dem Viewport.

Absolut vs. relativ auf einen Blick

Nutze diese Tabelle als Landkarte. Du brauchst nicht jede Einheit am ersten Tag — lerne die Familien, dann übe die Alltagseinheiten.

Pixel (px)

px ist eine absolute Einheit auf dem Bildschirm. Vorhersagbar für dünne Rahmen und kleine feste Details. Weniger ideal als einzige Einheit für alle Typografie auf einer responsiven Site, weil sie nicht automatisch mit der Root-Schriftpräferenz des Nutzers skaliert wie rem.

Wann px weiterhin glänzt

Bevorzuge px für Haarlinien-Rahmen, Schattenversätze und winziges UI-Chrome mit fester Kante. Bevorzuge relative Einheiten, wenn das Design mit Schriftgröße oder Containerbreite atmen soll.

rem und em

rem ist relativ zur Schriftgröße des Root-Elements (meist <html>). em ist relativ zur Schriftgröße des aktuellen Elements (oder des Elternteils, je nach Eigenschaft). Für Einsteiger ist rem die sicherere Voreinstellung für font-size und viele Abstände, weil sie über verschachtelte Elemente konsistent bleibt.

em in einem Satz

Nutze em, wenn ein Wert mit der lokalen Schrift skalieren soll — zum Beispiel Padding, das wächst, wenn der Text der Komponente größer wird. Wenn verschachtelte em-Werte sich multiplizieren und „durchgehen“, stelle diese Größen auf rem um.

Prozent (%)

Ein Prozentwert ist relativ zu einer Elternmessung. Bei width: 50% zielt das Element auf die Hälfte der Elternbreite (wenn das Elternteil eine definierte Breite hat). Prozent ist das klassische Werkzeug für fließende Layouts im Container.

Viewport-Einheiten (vw und vh)

1vw ist 1 % der Viewport-Breite; 1vh ist 1 % der Viewport-Höhe. Mächtig für Fullscreen-Heros, aber leicht übertrieben — Text nur in vw kann auf sehr breiten oder schmalen Bildschirmen unlesbar werden.

Eine sinnvolle Standardgewohnheit

Praktischer Start: rem für Schriftgrößen und die meisten vertikalen Abstände, % oder flexible Layout-Werkzeuge (später: Flexbox/Grid) für Breiten, und px für Rahmen und winzige feste Details. Viewport-Einheiten wieder aufgreifen, wenn du Full-Bleed-Bereiche baust — nicht für jeden Abstand.

Probiere es selbst

1. Erstelle eine .card-Regel mit width: 80%, max-width: 24rem und border: 1px solid #94a3b8.
2. Setze .card h2 { font-size: 1.5rem; } und einen kurzen Absatz auf 1rem.
3. Füge darüber einen .banner { min-height: 40vh; }-Bereich hinzu.
4. Ändere die Fenstergröße und die Root-html { font-size: … }, um zu spüren, wie %, vh und rem unterschiedlich reagieren.
5. Optional: Wandle die Überschrift in .card zu 1.5em und prüfe, ob verschachtelte Größen überraschen.

Häufige Fehler

• font-size: 16 ohne Einheit — für Längen in Standard-CSS ungültig
• Nur px für jede Schrift auf einer Site, die Zoom/Nutzerpräferenzen respektieren sollte
• Viele em-Schriftgrößen verschachteln, bis Text riesig oder winzig wird
• Fließtext nur mit vw setzen, sodass Zeilen auf großen Monitoren explodieren
• Annehmen, dass %-Höhe funktioniert, wenn das Elternteil keine explizite Höhe hat

Zusammenfassung

• Längenwerte brauchen meist eine Einheit (px, rem, %, vw, …)
• Absolute Einheiten bleiben fest; relative skalieren mit Schrift, Eltern oder Viewport
• Bevorzuge rem für Typo, %/Layoutsysteme für Breiten, px für feine Rahmen
• em skaliert mit lokaler Schrift; vw/vh mit dem Viewport
• Passe die Einheit an die Aufgabe an — erzwinge nicht eine Einheit überall