CSS - Maßeinheiten: Ein Anfängerleitfaden
Hallo da draußen, zukünftige CSS-Zauberer! ? Willkommen auf unserer magischen Reise in die Welt der CSS-Maßeinheiten. Als dein freundlicher Nachbarschafts-Computerlehrer bin ich aufgeregt, dich durch diesen wichtigen Aspekt des Webdesigns zu führen. Keine Sorge, wenn du noch nie eine Zeile Code geschrieben hast – wir starten bei Null und bauen unser Wissen gemeinsam auf!
Längeneinheiten: Die Bausteine der CSS-Maßeinheiten
Lassen wir mit den Grundlagen los. In CSS verwenden wir verschiedene Einheiten, um die Größe von Elementen, Rändern, Abständen und mehr zu spezifizieren. Denke an diese Einheiten als Lineale und Maßbänder der digitalen Welt. Sie helfen uns dabei, Websites zu erstellen, die auf allen Geräten, von winzigen Handys bis zu riesigen Desktop-Monitoren, toll aussehen.
Hier ist eine Tabelle der gebräuchlichsten CSS-Längeneinheiten:
| Einheit | Beschreibung | Beispiel |
|---|---|---|
| px | Pixel | 16px |
| em | Relativ zur Schriftgröße des Elements | 1.5em |
| rem | Relativ zur Schriftgröße des Wurzelelements | 2rem |
| % | Prozentsatz | 50% |
| vw | Viewport-Breite | 100vw |
| vh | Viewport-Höhe | 50vh |
Nun tauchen wir tiefer in jede dieser Einheiten ein und schauen uns an, wie sie in der Praxis funktionieren!
CSS-Maßeinheiten - em-Einheit
Die 'em'-Einheit ist wie ein Chamäleon – sie passt sich ihrer Umgebung an. Ein 'em' ist gleich der Schriftgröße des aktuellen Elements. Das macht sie besonders nützlich für die Erstellung skalierbarer Designs.
.parent {
font-size: 16px;
}
.child {
font-size: 1.5em; /* Das wird 24px */
margin-bottom: 1em; /* Das wird auch 24px */
}In diesem Beispiel wird die Schriftgröße des .child-Elements 24px (1.5 * 16px) und der untere Rand ebenfalls 24px. Es ist, als würde das .child sagen: "Ich will 1.5 Mal so groß sein wie mein Elternteil!"
CSS-Maßeinheiten - ch-Einheit
Die 'ch'-Einheit ist ein bisschen ein Typografie-Nerd. Sie basiert auf der Breite des '0' (Null)-Zeichens in der aktuellen Schriftart. Das kann besonders nützlich sein, um konsistente Layouts zu erstellen, insbesondere mit monospaßen Schriften.
.code-snippet {
font-family: 'Courier New', monospace;
width: 40ch; /* Breite von 40 '0'-Zeichen */
}Das erstellt eine Box, die genau 40 Zeichen breit ist – perfekt für die Anzeige von Code-Snippets!
CSS-Maßeinheiten - rem-Einheit
Die 'rem'-Einheit ist wie der weise Älteste der CSS-Familie. Sie bezieht sich immer auf die Schriftgröße des Wurzelelements (normalerweise das <html>-Tag) und ignoriert die Schriftgrößen der Elternelemente.
html {
font-size: 16px;
}
.container {
font-size: 20px;
}
.container p {
font-size: 1.5rem; /* Das wird 24px, basierend auf der Schriftgröße des html */
}In diesem Fall wird der Absatz in der .container trotz der anderen Schriftgröße der .container immer 24px (1.5 * 16px vom Wurzel).
CSS-Maßeinheiten - lh und rlh Einheit
Die 'lh'-Einheit basiert auf der Zeilenhöhe eines Elements, während 'rlh' auf die Zeilenhöhe des Wurzelelements basiert. Diese sind neueren Einheiten und großartig für die Erstellung von vertikalen Rhythmen in deinen Designs.
.paragraph {
font-size: 16px;
line-height: 1.5;
margin-bottom: 1lh; /* Das wird der Zeilenhöhe entsprechen */
}Das erstellt einen schönen, konsistenten Abstand zwischen Absätzen basierend auf der Zeilenhöhe.
CSS-Maßeinheiten - vh-Einheit und vw-Einheit
Jetzt kommen wir zu den Viewport-Einheiten – diese sind meine persönlichen Favoriten! 'vh' steht für Viewport-Höhe und 'vw' für Viewport-Breite. Sie sind Prozentsätze der Gesamtbildschirmgröße.
.hero-section {
height: 100vh; /* Volle Höhe des Viewports */
width: 100vw; /* Volle Breite des Viewports */
}
.half-width {
width: 50vw; /* Die Hälfte der Breite des Viewports */
}Diese Einheiten sind fantastisch für die Erstellung von responsiven Designs, die sich an jede Bildschirmgröße anpassen. Ich habe sie einmal verwendet, um eine Vollbild-Landingpage zu erstellen, die auf alles von Handys bis zu riesigen Fernsehern toll aussah!
CSS-Maßeinheiten - vmin und vmax Einheit
'vmin' und 'vmax' sind das dynamische Duo der Viewport-Einheiten. 'vmin' verwendet die kleinere Dimension des Viewports, während 'vmax' die größere verwendet.
.square {
width: 50vmin;
height: 50vmin;
}Das erstellt ein perfektes Quadrat, das immer 50% der kleineren Viewport-Dimension beträgt – großartig für die Aufrechterhaltung von Seitenverhältnissen!
CSS-Maßeinheiten - vb Einheit
Die 'vb'-Einheit basiert auf der Größe des Viewports in der Blockrichtung (normalerweise die Höhe in horizontalen Schreibmodi). Sie ist ähnlich wie 'vh', aber passt sich an verschiedene Schreibmodi an.
.vertical-text {
writing-mode: vertical-rl;
height: 100vb; /* Volle Höhe in vertikalem Schreibmodus */
}Dies ist besonders nützlich für die Erstellung von Layouts, die sowohl in horizontalen als auch vertikalen Schreibsystemen gut funktionieren.
CSS-Maßeinheiten - vi Einheit
Die 'vi'-Einheit ist die inline-Version der 'vb'. Sie basiert auf der Größe des Viewports in der inline-Richtung (normalerweise die Breite in horizontalen Schreibmodi).
.horizontal-scroll {
width: 200vi; /* Zweimal die Viewport-Breite */
overflow-x: scroll;
}Das erstellt ein horizontal scrollbares Element, das immer zweimal so breit wie der Viewport ist.
Beispiel - Prozentsätze
Prozentsätze in CSS sind immer relativ zu etwas. Für Breiten sind sie normalerweise relativ zur Breite des Elternelements.
.parent {
width: 300px;
}
.child {
width: 50%; /* Das wird 150px */
}Hier wird das .child-Element immer die Hälfte der Breite seines Elternteils sein. Es ist, als würde dein Element sagen: "Du kannst die Hälfte dessen haben, was dein Elternteil hat!"
Beispiel - Zahlen
Manchmal siehst du CSS-Eigenschaften ohne Einheiten – nur Zahlen. Diese werden normalerweise für unitlose Eigenschaften wie line-height oder opacity verwendet.
p {
line-height: 1.5; /* 1.5 Mal die Schriftgröße */
opacity: 0.8; /* 80% undurchsichtig */
}In diesem Fall wird die Zeilenhöhe 1.5 Mal die Schriftgröße betragen, was schön spaced Text erzeugt, und die Deckkraft macht den Text leicht transparent.
Und das war's, Leute! Wir haben durch das Land der CSS-Maßeinheiten gereist. Denke daran, der Schlüssel zum Beherrschen dieser ist Übung. Probiere verschiedene Einheiten in deinen Projekten aus, und du wirst很快 eine Intuition dafür entwickeln, wann du welche verwenden sollst.
Happy Coding, und mögen deine Layouts immer pixelgenau sein! ?✨
Credits: Image by storyset