Einheiten
In CSS werden verschiedene Einheiten verwendet, um Größenangaben für Abstände, Größen und Positionen von Elementen auf einer Webseite festzulegen. Hier sind einige der wichtigsten Einheiten und ihre Verwendungszwecke:
Häufige verwendete Einheiten
Pixel (px)
Absolute Einheit, die einen einzelnen Punkt auf einem Bildschirm darstellt.
Häufig für feste Größen verwendet, die auf genaue Pixelwerte angewiesen sind.
Beispiel:
.slider-image { height: 200px; }Alle Bilder eines Sliders sollen genau 200px hoch angezeigt werden.
Prozent (%)
Relativ zur Größe des übergeordneten Elements.
Ermöglicht eine flexible und reaktionsschnelle Gestaltung, da sich die Größe an die des übergeordneten Elements anpasst.
Beispiel:
.map-container { width: 50%; }Einen Kartenausschnitt auf die halbe Breite des umgebenden Containers skalieren.
Relative Einheiten (rem und em)
"rem" ist relativ zur Schriftgröße des Root-Elements (<html>). Das Root-Element hat meist die Schriftgröße 1rem = 16px.
"em" ist relativ zur Schriftgröße des übergeordneten Elements. Ist recht unberechenbar und sollte nur in Ausnahmen verwendet werden.
Anwendungsbereich: Wird vor allem eingesetzt für skalierbare Schriftgrössen und Abstände. Ist relevant für Accessability: Wird die Standard-Schriftgrösse des Browsers verändert, dann werden rem-Einheiten proportional dazu skaliert.
Beispiel:
h1 { font-size: 2.5rem; }Überschrift 1 wird 2.5 mal so gross wie Standard-Text angezeigt, also 2.5x16px = 40px
Viewport Height (vh) und Viewport Width (vw)
Relativ zur Höhe bzw. Breite des Browserfensters.
Nützlich, um Elemente proportional zur Größe des sichtbaren Bereichs des Browserfensters zu dimensionieren.
Beispiel:
.container { min-height: 100vh; }Den Container mind. so hoch wie das Fenster machen, damit der Footer unten bleibt.
Berechnete Einheiten
Kalkulation: calc()
Obige Einheiten können kombiniert werden, beispielsweise um eine Breite relativ zu einem umgebenden Element zu berechnen.
Beispiel:
width: calc(100% - 200px);Macht einen Text 200px weniger breit als den gesamten Contanier, z.B. weil daneben noch ein Bild mit 200px Platz haben muss.Achtung: Beachte die Leerschläge zwischen den Zahlen und Operatoren!
Selber ausprobieren: https://developer.mozilla.org/en-US/docs/Web/CSS/calc
Vergleichen: min(), max(), clamp():
min() liefert das kleinere von 2 Massen, z.B. width: min(200px, 50%);
max() liefert das kleinere von 2 Massen, z.B. width: max(200px, 50%);
clamp() vergleicht 3 Werte: Einen Mindestwert, einen Idealwert und einen Höchstwert, z.B. , z.B. width: clamp(200px, 50%, 400px);
min(), max(), clamp() sind anschaulich beschrieben auf https://web.dev/articles/min-max-clamp.
Selten genutzte Einheiten
Absolute Längeneinheiten (cm, mm, in, pt, pc)
Absolute Einheiten, die physische Größen wie Zentimeter (cm), Millimeter (mm), Zoll (in), Punkte (pt) und Pica (pc) darstellen.
Anwendungsbereich: Für den Druck oder spezifische Ausgabeformate verwendet. Weniger gebräuchlich für Webdesign.
Beispiel:
body { width: 21cm; }Skaliert ein Dokument zum Ausdrucken auf A4-Breite
Last updated
Was this helpful?