Einheiten
px, rem, em, Prozent und Viewport-Einheiten haben je eigene Stärken. Die richtige Wahl macht Layouts robust und zugänglich.
Ansicht
01
Verstehen
Lies die Kernidee und das Beispiel.
02
Prüfen
Beantworte die Aktiv-Checks.
03
Anwenden
Setze die Transferaufgabe um.
Lerninhalt
Verstehen & anwenden
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.
html {
font-size: 16px;
}
h2 {
font-size: 1.5rem; /* 24px */
margin-bottom: 1rem; /* 16px */
}Prozent und Viewport
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.
Rechnen mit calc()
calc() kombiniert unterschiedliche Einheiten in einem Ausdruck.
Typisch: volle Breite minus fester Seitenleiste oder Abstände, die sich aus mehreren Werten ergeben.
.content {
width: calc(100% - 250px);
min-height: calc(100vh - 64px);
}Vertiefung
Einheiten tragen Bedeutung
px ist fest und ignoriert Nutzereinstellungen. rem bezieht sich auf die Wurzel und ist für Schrift und Abstände meist die beste Wahl. em bezieht sich auf die aktuelle Schriftgröße und eignet sich für Komponenten, die mitskalieren.
Prozent bezieht sich auf den Elternteil, vw und vh auf den Viewport. dvh berücksichtigt dynamische Browserleisten auf Mobilgeräten. calc() kombiniert Einheiten, wenn eine feste und eine flexible Größe zusammenkommen.
:root {
--space: clamp(1rem, 3vw, 2rem);
}
.section {
padding-block: var(--space);
min-height: calc(100dvh - 4rem);
}Merksatz: rem für Skalierung, em für Komponenten, Prozent für Elternbezug, dvh für mobile Viewports. calc() für gemischte Werte.
Übungsaufgabe
Einheiten sicher kombinieren
Baue einen Abschnitt mit fluiden Innenabständen, einer Mindesthöhe abzüglich Header und einer Schriftgröße, die zwischen zwei rem-Werten bleibt.
Das soll dein Programm können
- clamp() für den Abstand
- calc() mit 100dvh und Headerhöhe
- rem für Schriftgröße
- Kein px für Fließtext
- Kommentar zur Wahl der Einheiten
Schreibe den Code hier oder in deiner IDE und vergleiche ihn dann mit der Lösung.
Dein Code wird automatisch auf diesem Gerät gespeichert.
Hinweis anzeigen
Für die Mindesthöhe: min-height: calc(100dvh - 4rem). Für fluide Schrift: font-size: clamp(1rem, 2.5vw, 1.25rem).
Lösung anzeigen
.section {
/* rem skaliert mit der Wurzel, vw nur für den fluiden Anteil. */
padding-block: clamp(1rem, 3vw, 2rem);
min-height: calc(100dvh - 4rem);
font-size: clamp(1rem, 2.5vw, 1.25rem);
}
.section h2 {
font-size: 1.5rem;
margin-block-end: 1rem;
}Warum funktioniert das?
clamp begrenzt den fluiden Wert nach oben und unten. calc mischt Viewport- und rem-Einheiten; dvh vermeidet Probleme mit mobilen Browserleisten.
Aktiv-Check
Teste dein Verständnis
Erkennen: Welcher Abschnitt passt?
Welcher Abschnitt passt zu diesen Begriffen?
Transfer
Mini-Projekt: Eine Karte gestalten
Gestalte eine Karte mit Bild, Titel, Text und Button. Ändere anschließend nur die Schriftgröße im Browser und prüfe, ob sie stabil bleibt.
Selbstcheck
Kann ich das schon?
Hake ab, was du wirklich erklären oder selbst bauen könntest.
Fortschritt
Bereit zum Abschließen?
Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.