CSS Einheiten: Der Ultimative Guide

Eine CSS-Einheit bestimmt die Größe einer Eigenschaft, die Sie für ein Element oder dessen Inhalt festlegen. Wenn Sie z. B. die Eigenschaft margin eines Absatzes festlegen möchten, geben Sie ihr einen bestimmten Wert. Dieser Wert beinhaltet die CSS-Einheit.\nSchauen wir uns ein kleines Beispiel an:

p {
    margin: 20px;
}

In diesem Fall ist margin die Eigenschaft, 20px ist der Wert und px (Pixel) ist die CSS-Einheit.

Obwohl es üblich ist, Einheiten wie px zu verwenden, stellt sich oft die Frage: "Was ist die beste Einheit, die man hier verwenden sollte?"

Im Folgenden finden Sie einige Überlegungen, die Sie bei der Auswahl eines Einheitentyps anstellen sollten, sowie Beispiele für die Verwendung:

Bei der Auswahl der zu verwendenden Einheiten ist es wichtig, die beiden Kategorien von Einheiten zu berücksichtigen: absolute und relative Einheiten.

Einheiten, die "absolut" sind, haben unabhängig vom übergeordneten Element oder der Fenstergröße die gleiche Größe. Das bedeutet, dass eine Eigenschaft mit einem Wert, der eine absolute Einheit hat, diese Größe hat, wenn sie auf einem Telefon oder einem großen Monitor (und allem dazwischen!) betrachtet wird.

Absolute Einheiten können bei der Arbeit an einem Projekt nützlich sein, bei dem die Reaktionsfähigkeit nicht berücksichtigt wird. So können z. B. Desktop-Anwendungen, deren Größe nicht geändert werden kann, für die Standardabmessungen gestylt werden. Wenn sich das Fenster nicht skalieren lässt, muss sich auch der Inhalt nicht ändern.

Pixel (px) sind in der Regel die beliebteste absolute Einheit für Bildschirme. Zentimeter, Millimeter und Zoll sind für den Druck gebräuchlicher und vielleicht wussten Sie nicht einmal, dass es diese Optionen gibt!

Relative Einheiten sind für die Gestaltung von responsiven Websites nützlich, da sie relativ zur übergeordneten Größe oder zur Fenstergröße (je nach Einheit) skaliert werden.

Die Bestimmung von relativen Einheiten kann etwas schwieriger sein als die von absoluten Einheiten, also gehen wir die Optionen im Detail durch.

Es ist nicht immer klar, welche dieser Optionen am besten für jede Art von CSS-Eigenschaft zu verwenden ist. Beispielsweise ist % in der Regel für layoutbezogene Eigenschaften wie width besser geeignet als für font-size.

% bezieht sich auf die Breite des Parent-Elements. Möchte man z. B. 10% der Container-Breite als Margin verwenden:

.child {
    margin: 10%;
}

Wird das Parent-Element breiter, wird auch die Margin größer.

Die Einheit em bezieht sich auf die Schriftgröße des Parent-Elements. Hat ein Container die Schriftgröße 30px entspricht 0.5em 15px.

Wir raten in den meisten Fällen von der Verwendung von em ab, da dies zu unberechenbarem Verhalten bei Änderungen führen kann.

.child {
    font-size: 0.5em;
}

Die wohl beliebteste relative Einheit. rem steht für Root Em und bezieht sich auf die Schriftgröße des Root-Elements. Diese beträgt meist 16px. Möchte man also eine Schriftgröße von 32px verwendet man 2rem. Der Vorteil von rem gegenüber px liegt darin, dass Nutzer-Einstellungen wie Browser-Zoom berücksichtigt werden, was bei absoluten Einheiten wie px nicht der Fall ist.

Gleichzeitig kann über eine Media-Query die Schrift-Größe des Root-Elements angepasst werden, was sich auf alle Elemente, welche mit rem gestylt sind, auswirkt und so die Entwicklung einer responsiven Website vereinfacht.

.header {
    font-size: 2rem;
}

Während sich die Einheit ch für Monospaced-/Fixbreiten-Schriften wie Courier auf die Breite eines Buchstaben bezieht, kann sie bei Proportionalschriften wie Arial unvorhersehbar sein.

Wenn Sie zum Beispiel die Schriftart Courier verwenden und die Breite eines Elements auf 60ch einstellen, ist dieses Element genau 60 Zeichen breit.

Wenn Sie jedoch die Schriftart Arial verwenden und die Breite eines Elements auf 60 Zeichen einstellen, ist nicht vorhersehbar, wie breit das Element sein wird - die Zeichen können über den Container hinausgehen oder ihn unterschreiten.

.kleiner-text {
    width: 10ch;
}

vh (Viewport-Height) bezieht sich auf 1% der Höhe des Browser-Fensters. Eine Height von 100vh entspricht also dem gesamten Viewport. vh kann z. B. für die Definition der Höhe des Website-Heros verwendet werden, wenn man sicherstellen möchte, dass der Hero den gesamten Viewport einnimmt.

.hero {
    height: 100vh;
}

vw (Viewport-Width) bezieht sich auf 1% der Breite des Browser-Fensters. Eine Width von 100vw entspricht also dem gesamten Viewport. Möchten man einen Container genau halb so breit wie das Browser-Fenster haben verwendet man 50vw

.halbe-breite {
    width: 50vw;
}

vmin beschreibt die kleinere der beiden Viewport-Dimensionen. Ist das Browser-Fenster im Querformat bezieht sich vmin auf dessen Höhe. Ist es im Hochformat auf dessen Breite.

.min-width {
    width: 100vmin;
}

vmax beschreibt die größere der beiden Viewport-Dimensionen. Ist das Browser-Fenster im Querformat bezieht sich vmax auf dessen Breite. Ist es im Hochformat auf dessen Höhe. vmax kann praktisch sein, wenn man sicherstellen möchte, dass ein Bild, Pattern oder Overlay den den ganzen Viewport abdeckt.

.hintergrund-pattern {
    width: 100vmax;
}

Die CSS-Einheit ex wird nicht sehr häufig verwendet, ist aber gutes Maß für die X-Höhe einer Schrift. Angenommen, Sie möchten, dass die Zeilenhöhe (Line-Height) einer Schrift doppelt soch hoch ist, die der Buchstabe "x" dieser Schrift.

.zwei-x-line-height {
    line-height: 2ex;
}

Wann und wie Sie Ihre CSS-Einheiten auswählen, hängt im Wesentlichen von einigen Fragen ab:

• Soll das Element skaliert werden, wenn sich die Größe des Viewports ändert? (Auf verschieden großen Endgeräten)
• Wenn ja, worauf soll die Slakierung des Elements basieren?

Wenn Sie diese Fragen beantwortet haben, ist es viel einfacher, die beste Einheit zu finden. 💪