Was ist CSS-Einheiten-Umrechner?
CSS unterstützt mehrere verschiedene Einheiten zur Größenangabe – absolute wie px und pt sowie relative wie rem, em, vw, vh und %. Relative Einheiten sind essenziell für responsives, barrierefreies Design (rem respektiert insbesondere die bevorzugte Browser-Schriftgröße eines Nutzers), aber das Umrechnen im Kopf ist wirklich schwierig, da das Ergebnis vom Kontext abhängt: der Wurzel-Schriftgröße, der Schriftgröße des aktuellen Elements oder den Viewport-Abmessungen.
Dieser Umrechner erledigt diese Berechnung für Sie: Legen Sie Ihre Basis-Schriftgröße, Viewport-Abmessungen und den umzurechnenden Wert fest, und sehen Sie sofort den entsprechenden Wert in jeder anderen Einheit – nützlich, um die Pixelmaße eines Design-Mockups in responsive rem/vw-Werte zu übersetzen oder zu prüfen, wie eine bestehende CSS-Regel tatsächlich auf dem Bildschirm dargestellt wird.
Wann Sie diesen Rechner verwenden
- Wenn Sie die Kosten des Tools vor Projektbeginn bewerten müssen
- Wenn Sie die Ergebnisse mit ähnlichen Tools vergleichen
- Wenn Sie lernen möchten, wie Sie das Tool in verschiedenen Szenarien verwenden
- Wenn Sie Ergebnisse mit dem Team oder Kunden teilen
- Wenn Sie die Genauigkeit der Tool-Berechnungen überprüfen
- Wenn Sie nach einer schnellen und einfachen Lösung für ein bestimmtes Problem suchen
Schritte:
- Geben Sie den umzurechnenden Wert ein und wählen Sie seine Ausgangseinheit.
- Legen Sie Ihre Basis-Schriftgröße fest (Standard ist der Browser-Standard von 16px).
- Geben Sie für vw/vh-Umrechnungen Ihre Ziel-Viewport-Breite und -Höhe ein.
- Lesen Sie den entsprechenden Wert in jeder anderen Einheit sofort ab.
Formel
1rem = 1em = Basis-Schriftgröße (Standard 16px)
1pt = 96/72 px ≈ 1,333px
1vw = Viewport-Breite / 100
1vh = Viewport-Höhe / 100
1% = Referenzwert / 100
Anwendungsfälle
- Umrechnen einer pixelbasierten Figma-/Sketch-Spezifikation eines Designers in rem-Werte für barrierefreies CSS
- Prüfen, wie eine vw-basierte responsive Schriftgröße tatsächlich bei einer bestimmten Bildschirmbreite dargestellt wird
- Übersetzen von älterem pt-basiertem Druck- oder E-Mail-CSS in webstandard px oder rem
- Überprüfen, ob die Abstandsskala eines Designsystems einheitenübergreifend sauber übereinstimmt
- Schnelles Überprüfen eines CSS-Werts während des Code-Reviews, ohne die Entwicklertools zu öffnen
Hauptvorteile
- Rechnet zwischen allen 7 gängigen CSS-Einheiten an einem Ort um
- Verwendet Ihre tatsächliche Basis-Schriftgröße und Ihren Viewport, keine feste Annahme
- Sofortige Ergebnisse während der Eingabe – kein Öffnen der Browser-Entwicklertools nötig
- Kostenlos, keine Anmeldung, läuft vollständig im Browser
Professionelle Tipps
- Bevorzugen Sie rem gegenüber em für Schriftgrößen, um unerwartetes Aufsummieren in verschachtelten Komponenten zu vermeiden
- Verwenden Sie dvh/svh statt vh für mobile Vollbild-Layouts, wenn Ihre Zielbrowser dies unterstützen
- Halten Sie eine konsistente Basis-Schriftgröße in Ihrem Designsystem, damit rem-Umrechnungen vorhersehbar bleiben
- Rechnen Sie beim Übersetzen eines pixelgenauen Designs Abstände in rem um, behalten Sie aber Randbreiten und andere Feinheiten in px
Häufige Fehler vermeiden
- Annehmen, 1rem entspreche immer 16px, ohne zu prüfen, ob die Wurzel-Schriftgröße geändert wurde
- Verwenden von vh für mobile Vollbild-Layouts, ohne das Verhalten der Adressleiste des Browsers zu berücksichtigen
- Verschachteln em-basierter Schriftgrößen und Überraschung über unerwartetes Aufsummieren
- Inkonsistentes Mischen von px und rem innerhalb derselben Komponente, wodurch die Skalierung der Barrierefreiheit unterbrochen wird
Wichtige Begriffe erklärt
- Wurzel-Schriftgröße: Die auf dem html-Element gesetzte Schriftgröße, auf die sich alle rem-Einheiten beziehen
- Viewport: Der sichtbare Bereich einer Webseite im Browserfenster
- Absolute Einheit: Eine Einheit wie px oder pt mit einer festen realen Größe, unabhängig vom Kontext
- Relative Einheit: Eine Einheit wie rem, em, vw oder %, deren Größe von einem anderen Wert abhängt
Verwandte Konzepte
- Farbkonverter: Zwischen HEX-, RGB- und HSL-Farbformaten umrechnen
- Längenkonverter: Zwischen Zoll, Zentimetern, Pixeln und mehr umrechnen
- Einheitenkonverter: Zwischen verschiedenen Maßeinheiten umrechnen
- Seitenverhältnis-Rechner: Seitenverhältnisse berechnen und umrechnen
- Datenkonverter: Zwischen Byte, KB, MB, GB und TB umrechnen
Beispiel
Bei einer Basis-Schriftgröße von 16px entspricht 1,5rem 24px. Bei einer Viewport-Breite von 1440px entspricht 5vw 72px.
Interpretation Ihrer Ergebnisse
Dieses Tool zeigt detaillierte Ergebnisse basierend auf Ihren Eingaben. Überprüfen Sie jeden Abschnitt sorgfältig, um zu verstehen, wie Sie die Zahlen interpretieren und Entscheidungen daraus treffen können.
Wenn Sie Fragen haben, wie das Tool funktioniert oder wie Sie bestimmte Ergebnisse interpretieren, lesen Sie den FAQ-Bereich unten oder kontaktieren Sie den Support.