CSS

Einheiten

px, rem, em, Prozent und Viewport-Einheiten haben je eigene Stärken. Die richtige Wahl macht Layouts robust und zugänglich.

Absolute und relative Einheiten

px ist fest und vorhersagbar, skaliert aber nicht mit Nutzereinstellungen.

rem bezieht sich auf die Wurzel-Schriftgröße und ist der Standard für Schriften und Abstände.

em bezieht sich auf die Schriftgröße des Elements selbst und eignet sich für Komponenten, die mitskalieren sollen.

rem in der Praxis

html {
  font-size: 16px;
}

h2 {
  font-size: 1.5rem; /* 24px */
  margin-bottom: 1rem; /* 16px */
}

Prozentwerte beziehen sich auf das Elternelement, etwa width: 50%.

vw und vh beziehen sich auf die Größe des Viewports und eignen sich für Vollbild-Bereiche.

<%><vw><vh>

calc() kombiniert unterschiedliche Einheiten in einem Ausdruck.

Typisch: volle Breite minus fester Seitenleiste oder Abstände, die sich aus mehreren Werten ergeben.

<calc()>

calc()

.content {
  width: calc(100% - 250px);
  min-height: calc(100vh - 64px);
}

Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.