Lädt...
CSS Einheiten – Vollständiges Referenzhandbuch
Dieses umfassende Referenzhandbuch zu CSS-Einheiten richtet sich an Entwickler, die präzise, skalierbare und responsive Layouts erstellen möchten. Es bietet einen schnellen Zugriff auf alle verfügbaren CSS-Einheiten, gegliedert nach Kategorien: absolute Längeneinheiten, relative Längen, Viewport-Einheiten, Container-Query-Einheiten, Prozentangaben, Winkel, Zeit, Frequenz, Auflösung, Farben, Funktionen und Grid-Einheiten. Entwickler können dieses Handbuch nutzen, um die passende Einheit für Layouts, Typografie oder Designentscheidungen zu identifizieren und praxisnah anzuwenden. Jede Einheit wird mit Syntax, praktischen Beispielen, Einsatzgebieten und Browserunterstützung dargestellt, sodass schnelle Entscheidungen im Entwicklungsprozess möglich sind.
📊 Absolute Längeneinheiten
| Unit | Description | Conversion | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| px | Pixel – Gerätepixel | 1px = 1/96 inch | width: 300px | Bildschirmlayouts, Rahmen, Schatten | Alle Browser |
| cm | Zentimeter | 1cm = 37.8px | margin: 2cm | Drucklayouts, physische Maße | Alle Browser |
| mm | Millimeter | 1mm = 3.78px | border: 1mm solid | Präzise Druckmessungen | Alle Browser |
| in | Zoll | 1in = 96px | page-break-after: 2in | Drucklayouts, große Maße | Alle Browser |
| pt | Punkt | 1pt = 1.33px | font-size: 12pt | Typografie, Druck | Alle Browser |
| pc | Pica | 1pc = 16px | line-height: 1.5pc | Drucktypografie, Spaltenbreiten | Alle Browser |
| Q | Viertelmillimeter | 1Q = 0.25mm | margin: 4Q | Sehr präzise Drucklayouts | Moderne Browser |
📊 Relative Längeneinheiten
| Unit | Description | Relative To | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| em | Em-Einheiten | Schriftgröße des Elternelements | font-size: 1.2em | Typografie, textbasierte Abstände | Alle Browser |
| rem | Root-Em | Schriftgröße des Root-Elements | margin: 2rem | Konsistente Abstände, skalierbare Layouts | IE9+ |
| ex | x-Höhe | Höhe des kleinen „x“ der Schrift | line-height: 2ex | Typografie, vertikale Ausrichtung | Alle Browser |
| ch | Zeichenbreite | Breite des Zeichens '0' in der Schrift | width: 40ch | Textcontainer, Monospace-Layouts | IE9+ |
| cap | Kapitalhöhe | Höhe der Großbuchstaben | margin-top: 1cap | Typografie, vertikale Abstände | Moderne Browser |
| ic | Ideographisches Zeichen | Breite eines CJK-Zeichens | width: 20ic | Ostasiatische Typografie | Moderne Browser |
| lh | Zeilenhöhe | Zeilenhöhe des Elements | margin: 1lh | Vertikaler Rhythmus, Abstände | Moderne Browser |
| rlh | Root-Linenhöhe | Zeilenhöhe des Root-Elements | padding: 0.5rlh | Konsistente vertikale Abstände | Moderne Browser |
📊 Viewport-Einheiten
| Unit | Description | Calculation | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| vw | Viewport-Breite | 1% der Viewport-Breite | width: 50vw | Volle Breite, responsives Design | IE9+ |
| vh | Viewport-Höhe | 1% der Viewport-Höhe | height: 100vh | Volle Höhe, Hero-Sections | IE9+ |
| vmin | Viewport Minimum | 1% der kleineren Viewport-Dimension | font-size: 4vmin | Quadratische Elemente, responsive Typografie | IE9+ |
| vmax | Viewport Maximum | 1% der größeren Viewport-Dimension | width: 50vmax | Responsive Layouts | IE9+ |
| vi | Viewport inline | 1% der Inline-Richtung | padding: 2vi | Logische Layouts, internationale Designs | Moderne Browser |
| vb | Viewport block | 1% der Block-Richtung | margin: 3vb | Logische Layouts, Schreibmodi | Moderne Browser |
| dvw | Dynamische Viewport-Breite | 1% der dynamischen Breite | width: 100dvw | Mobile Layouts, Adressleiste | Moderne Browser |
| dvh | Dynamische Viewport-Höhe | 1% der dynamischen Höhe | height: 100dvh | Mobile Fullscreen-Layouts | Moderne Browser |
| lvw | Large Viewport Width | 1% der großen Viewport-Breite | max-width: 90lvw | Mobile Layouts, UI sichtbar | Moderne Browser |
| lvh | Large Viewport Height | 1% der großen Viewport-Höhe | min-height: 100lvh | Mobile Layouts, Max-Viewport | Moderne Browser |
| svw | Small Viewport Width | 1% der kleinen Viewport-Breite | width: 100svw | Mobile Layouts, UI versteckt | Moderne Browser |
| svh | Small Viewport Height | 1% der kleinen Viewport-Höhe | height: 100svh | Mobile Layouts, Minimal-Viewport | Moderne Browser |
📊 Container Query Units
| Unit | Description | Calculation | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| cqw | Container Query Width | 1% der Container-Breite | width: 50cqw | Container-basiertes Responsive Design | Moderne Browser |
| cqh | Container Query Height | 1% der Container-Höhe | height: 80cqh | Container-Layouts | Moderne Browser |
| cqi | Container Query Inline | 1% der Container-Inline-Größe | padding: 2cqi | Logische Container-Layouts | Moderne Browser |
| cqb | Container Query Block | 1% der Container-Block-Größe | margin: 1cqb | Block-Dimensionierung | Moderne Browser |
| cqmin | Container Query Minimum | 1% der kleineren Container-Dimension | font-size: 3cqmin | Container-Typografie | Moderne Browser |
| cqmax | Container Query Maximum | 1% der größeren Container-Dimension | border-radius: 2cqmax | Container-basiertes Styling | Moderne Browser |
📊 Prozentangaben
| Unit | Description | Relative To | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| % | Prozent | Entsprechende Eigenschaft des Elternelements | width: 50% | Flexible Layouts, responsives Design | Alle Browser |
📊 Winkel
| Unit | Description | Conversion | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| deg | Grad | 360deg = Vollkreis | transform: rotate(45deg) | Rotationen, Gradients | Alle Browser |
| grad | Gradian | 400grad = Vollkreis | transform: rotate(100grad) | Mathematische Berechnungen, Gradients | Alle Browser |
| rad | Radiant | 2π rad = Vollkreis | transform: rotate(1.57rad) | Mathematische Transformationen | Alle Browser |
| turn | Umdrehung | 1turn = Vollkreis | transform: rotate(0.25turn) | Intuitive Rotationen, Animationen | IE9+ |
📊 Zeit
| Unit | Description | Conversion | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| s | Sekunden | 1s = 1000ms | transition-duration: 2s | Animationen, Übergänge | Alle Browser |
| ms | Millisekunden | 1000ms = 1s | animation-delay: 500ms | Präzises Timing, schnelle Animationen | Alle Browser |
📊 Frequenz
| Unit | Description | Conversion | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| Hz | Hertz | 1Hz = 1 Zyklus/Sekunde | Nicht üblich in CSS | Audioeigenschaften (Zukunft) | Begrenzt |
| kHz | Kilohertz | 1kHz = 1000Hz | Nicht üblich in CSS | Audioeigenschaften (Zukunft) | Begrenzt |
📊 Auflösung
| Unit | Description | Definition | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| dpi | Dots per inch | Physische Punkte pro Zoll | @media (min-resolution: 300dpi) | High-DPI Displays, Druck | IE9+ |
| dpcm | Dots per cm | Physische Punkte pro cm | @media (min-resolution: 118dpcm) | Metrische Maße, Druck | IE9+ |
| dppx | Dots per px | Gerätepixel pro CSS-Pixel | @media (min-resolution: 2dppx) | Retina Displays | IE9+ |
| x | Alias für dppx | Wie dppx | @media (min-resolution: 2x) | Retina Displays, vereinfachte Syntax | Moderne Browser |
📊 Farben
| Unit | Description | Format | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| \# | Hexadezimal | #RRGGBB oder #RGB | color: #ff0000 | Standardfarbnotation | Alle Browser |
| rgb() | RGB-Funktion | rgb(r, g, b) | color: rgb(255, 0, 0) | Präzise Farbkontrolle | Alle Browser |
| rgba() | RGB mit Alpha | rgba(r, g, b, a) | background: rgba(255, 0, 0, 0.5) | Transparente Farben | IE9+ |
| hsl() | HSL-Funktion | hsl(h, s%, l%) | color: hsl(0, 100%, 50%) | Intuitive Farbauswahl | IE9+ |
| hsla() | HSL mit Alpha | hsla(h, s%, l%, a) | background: hsla(0, 100%, 50%, 0.5) | Transparente HSL-Farben | IE9+ |
| hwb() | HWB-Funktion | hwb(h w% b%) | color: hwb(0 0% 0%) | Alternative Farbmodell | Moderne Browser |
| lab() | Lab-Funktion | lab(l a b) | color: lab(50% 20 -30) | Perzeptuelles Farbraum | Moderne Browser |
| lch() | LCH-Funktion | lch(l c h) | color: lch(50% 40 180) | Zylindrischer Lab-Farbraum | Moderne Browser |
| oklab() | OKLab-Funktion | oklab(l a b) | color: oklab(0.5 0.2 -0.3) | Verbessertes Lab-Farbraum | Moderne Browser |
| oklch() | OKLCH-Funktion | oklch(l c h) | color: oklch(0.5 0.4 180) | Verbessertes LCH-Farbraum | Moderne Browser |
| color() | Color-Funktion | color(space r g b) | color: color(display-p3 1 0 0) | Wide-Gamut-Farben | Moderne Browser |
📊 Funktionen
| Unit | Description | Calculation | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| calc() | Mathematische Berechnung | Kombiniert verschiedene Einheiten | width: calc(100% - 20px) | Mischung von Einheiten | IE9+ |
| min() | Minimalwert | Gibt den kleinsten Wert zurück | width: min(100px, 50%) | Responsive Einschränkungen | Moderne Browser |
| max() | Maximalwert | Gibt den größten Wert zurück | width: max(200px, 50%) | Responsive Minimums | Moderne Browser |
| clamp() | Begrenzter Wert | clamp(min, preferred, max) | font-size: clamp(1rem, 4vw, 2rem) | Responsive mit Grenzen | Moderne Browser |
| attr() | Attributwert | HTML-Attributwert | width: attr(data-width px) | Dynamische Werte aus HTML | Limitierter Support |
| var() | CSS-Variable | Eigene CSS-Property | color: var(--main-color) | Custom Properties | IE11+ (teilweise), Moderne Browser |
📊 Grid Units
| Unit | Description | Definition | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| fr | Fractional Unit | Bruchteil des verfügbaren Raums | grid-template-columns: 1fr 2fr | CSS Grid Layouts, flexible Spalten | IE10+ (-ms-) |
Schnelle Beispiele
css
CSS Code
/* Mischung aus absoluten und relativen Einheiten */
.container {
width: calc(100vw - 2rem);
max-width: 1200px;
padding: 1em 5%;
}
/* Responsive Typografie mit clamp */
.heading {
font-size: clamp(1.5rem, 4vw, 3rem);
line-height: 1.2;
margin-bottom: 1em;
}
/* Viewport-Einheiten für Fullscreen-Layouts */
.hero {
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
}
/* Container-Query-Einheiten für Komponenten */
.card {
width: 100cqw;
padding: 2cqi;
font-size: clamp(0.875rem, 3cqw, 1.25rem);
}
/* CSS Grid
mit Fractional Units */
.grid-layout {
display: grid;
grid-template-columns: 200px 1fr 2fr;
gap: 1rem;
}Verwenden Sie relative Einheiten (rem, em, %) für skalierbare und barrierefreie Designs. Bevorzugen Sie rem gegenüber em für konsistente Abstände im gesamten Layout. Viewport-Einheiten (vw, vh) sorgfältig nutzen, da Scrollbars nicht berücksichtigt werden. clamp() eignet sich für responsive Typografie. Kombinieren Sie Einheiten gezielt mit calc() für komplexe Layouts. px bleibt für Rahmen, Box-Shadows und dekorative Elemente geeignet. Container-Query-Einheiten vor Produktivsetzung testen. fr-Einheiten in CSS Grid für flexible Layouts einsetzen. Prüfen Sie Browser-Support bei neuen Einheiten wie dvh, lvh, svh. Logische Einheiten (vi, vb) für internationale Layouts nutzen. HSL/HSB-Farben erleichtern Farbmanipulation und Theming. Für ältere Browser stets Fallbacks bereitstellen. Verschiedene Einheitenkombinationen auf unterschiedlichen Geräten testen.
🧠 Testen Sie Ihr Wissen
Bereit zum Start
Referenzwissen Check
Testen Sie Ihr Wissen zu CSS-Einheiten.
3
Fragen
70%
Zum Bestehen
∞
Zeit
∞
Versuche
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt