CSS-Einheiten-Referenz

Alle Werkzeuge Kostenlos

Durchsuche jede CSS-Einheit – absolut (px, cm, pt), schriftrelativ (em, rem, ch), Viewport (vw, dvh), Container-Query, Grid (fr), Winkel, Zeit und Auflösung – in einer durchsuchbaren, nach Typ filterbaren Referenz mit Beschreibung, einem „Wann verwenden“-Hinweis und kopierfertigen Tokens. Im Browser, kostenlos.

Jede CSS-Einheit, erklärt. Alles läuft in deinem Browser aus einer integrierten Referenz – nichts wird an den Server gesendet.

Keine Einheit passt zu deiner Suche.
Versuche eine andere Einheit oder Kategorie – zum Beispiel rem, dvh, fr oder Winkel.

Über CSS-Einheiten-Referenz

Die CSS-Einheiten-Referenz dokumentiert jede von der Sprache angebotene Einheit — insgesamt 45 — organisiert nach Typ: absolute Einheiten wie px, cm und pt; schriftrelative Einheiten wie em, rem, ch und lh; Ansichtsfenster-Einheiten von vw und vh bis zu den neueren svh, lvh und dvh; Container-Query-Einheiten wie cqw und cqi; die Grid-Einheit fr; plus Winkel, Zeit, Auflösung und Prozent.

Jede Karte gibt euch mehr als eine Definition: den Einheiten-Token in kopierbarer Monospace-Schrift, seinen vollständigen Namen, seine Kategorie, eine allgemeinverständliche Beschreibung, wie er berechnet wird, und eine praktische „Wann verwenden"-Notiz, die sagt, wo die Einheit ihren Platz verdient — und wo eine andere besser dient.

Die Suche erfasst Tokens, Namen und Bedeutungen, sodass rem, viewport width und root alle ihre Einheiten finden, und Typ-Chips filtern das Raster auf eine Familie herunter. Alles läuft in eurem Browser aus einer integrierten Referenz, ohne dass etwas an einen Server gesendet wird.

So verwenden Sie CSS-Einheiten-Referenz

  1. Sucht nach einer Einheit per Token, Name oder Bedeutung — zum Beispiel rem, viewport width oder angle.
  2. Nutzt die Typ-Chips, um das Raster auf absolute, schriftrelative, Ansichtsfenster-, Container-, Grid-, Winkel-, Zeit-, Auflösungs- oder Prozenteinheiten zu filtern.
  3. Lest die Beschreibung jeder Einheit und ihre „Wann verwenden"-Notiz, um die richtige zu wählen.
  4. Klickt auf die Kopieren-Schaltfläche, um den Einheiten-Token für euer Stylesheet zu erhalten.

Häufig gestellte Fragen

Nutzt rem für Schriftgrößen und alles, was mit der bevorzugten Textgröße des Nutzers skalieren sollte — rem folgt der Root-Schriftgröße, sodass Barrierefreiheits-Einstellungen des Browsers funktionieren. Nutzt px für Dinge, die optisch konstant bleiben müssen, wie Haarlinien-Rahmen.

em bezieht sich auf die Schriftgröße des aktuellen Elements selbst, sodass sich verschachtelte Elemente addieren; rem bezieht sich immer auf das Root-Element und liefert vorhersehbare Ergebnisse. Deshalb ist rem zur Standardwahl für Abstände und Schriftgrößen-Skalen geworden.

Mobile Browser zeigen und verbergen ihre Symbolleisten, was die sichtbare Höhe ändert, während vh an der größeren Layout-Größe fixiert bleibt. Die dynamische Einheit dvh folgt der tatsächlich sichtbaren Höhe, während sich Symbolleisten bewegen, und svh/lvh sind an den kleinsten und größten Zustand gepinnt.

fr verteilt den freien Platz eines Grid-Containers nach Bruchteil: grid-template-columns: 2fr 1fr gibt der ersten Spalte die doppelte übrig gebliebene Breite der zweiten, nachdem feste Spuren und Abstände abgezogen wurden. Sie existiert nur innerhalb von Grid-Spurdefinitionen.

Sie bemessen Elemente relativ zu ihrem nächstgelegenen Query-Container statt zum Ansichtsfenster: cqw ist 1 % der Breite des Containers, cqi 1 % seiner Inline-Größe. Sie lassen eine Komponente an die Box anpassen, in der sie lebt, unabhängig von der Bildschirmgröße.

Ja. Alle 45 Einheiten sind kostenlos dokumentiert auf einer Seite, die vollständig in eurem Browser läuft — keine Anmeldung, keine Anfragen an den Server.
Teilen
Verwandte Tools
HTTP-Statuscodes Schlage jeden HTTP-Antwort-Statuscode (1xx–5xx) in einem durchsuchbaren, filterbaren Verzeichnis nach – öffne anschließend jeden Code, um zu erfahren, was er bedeutet, wann er einzusetzen ist, ob er cachebar ist und welcher RFC ihn definiert. Im Browser, kostenlos. Kostenlos
HTTP-Methoden Eine übersichtliche Referenz für jede HTTP-Anfragemethode – GET, POST, PUT, PATCH, DELETE und die übrigen, dazu WebDAV – die auf einen Blick zeigt, ob die jeweilige Methode sicher, idempotent und cachebar ist, ob sie einen Body annimmt, samt typischem Beispiel. Im Browser, kostenlos. Kostenlos
HTTP-Header-Referenz Schlage gängige HTTP-Anfrage- und -Antwort-Header in einem durchsuchbaren Verzeichnis nach – filtere nach Richtung und Kategorie, lies eine einzeilige Beschreibung und ein realistisches Beispiel und kopiere jeden Header-Namen mit einem Klick. Im Browser, kostenlos. Kostenlos
DNS-Record-Typen Durchsuche jeden gängigen DNS-Record-Typ – A, AAAA, CNAME, MX, TXT, NS, SOA, PTR, SRV, CAA, DNSKEY, DS, TLSA und mehr – mit Zweck, kopierbarem Zonendatei-Beispiel und Kategorie. Sofort durchsuchen und filtern, im Browser, kostenlos. Kostenlos
TCP/UDP-Portnummern Schlage bekannte und häufig genutzte Netzwerk-Ports in einer durchsuchbaren Tabelle nach – FTP, SSH, HTTP, HTTPS, MySQL, Postgres, RDP, Redis, MongoDB und 120+ weitere, jeweils mit Transportprotokoll, Dienst, Beschreibung und Kategorie. Nach Portnummer oder Dienstnamen suchen und Werte sofort kopieren. Im Browser, kostenlos. Kostenlos
Subnetz-/CIDR-Rechner Berechne IPv4-Subnetze aus CIDR oder Maske: Netzwerk, Broadcast, Host-Bereich, Wildcard und mehr. Kostenlos
Brauchen Sie Hilfe?
Ein Problem mit diesem Tool gefunden? Sagen Sie es unserem Team.
Problem melden

Füge dieses kostenlose Tool zu deiner eigenen Website hinzu — kopiere den Code unten und füge ihn ein.