CSS-Einheitenrechner
Zwischen px, rem, em, vw, vh und anderen CSS-Einheiten umrechnen
Einstellungen und Eingabe
Schnellvorgaben und Beispiele
Läuft in Ihrem Browser. Ihre Eingaben bleiben auf diesem Gerät.
Ergebnisse
Geben Sie Ihre Werte ein, um die Ergebnisse zu sehen.
Referenz und Berechnungsdetails
Über den kostenlosen CSS-Einheitenrechner
Der CSS-Einheitenrechner ist ein kostenloses, umfassendes Tool für Webentwickler und Designer, um sofort zwischen allen wichtigen CSS-Längeneinheiten umzurechnen. Ob Sie Pixel in rem, em in Prozent oder Viewport-Einheiten in absolute Maße umrechnen möchten: Das Tool liefert genaue Echtzeit-Umrechnungen für 10 verschiedene CSS-Einheiten gleichzeitig.
Das Verständnis und die richtige Verwendung von CSS-Einheiten ist grundlegend für responsive, barrierefreie Websites. Relative Einheiten wie rem und em skalieren mit den Schriftgrößeneinstellungen, sodass sich Ihre Layouts an Nutzereinstellungen und Anforderungen der Barrierefreiheit anpassen. Viewport-Einheiten (vw, vh) erzeugen fließende Designs, die auf die Bildschirmgröße reagieren. Absolute Einheiten (px, pt, cm, mm, in) liefern feste Maße für präzise Kontrolle, wenn Sie sie brauchen.
Dieses Tool zur Umrechnung von CSS-Einheiten geht über einfache Rechner hinaus: Sie können die Basisschriftgröße für Berechnungen mit rem/em/% anpassen und Viewport-Maße für Umrechnungen mit vw/vh festlegen. Alle 10 Ergebnisse erscheinen in einem übersichtlichen Raster mit Kopieren per Klick und sofortigem Einheitentausch. So finden Sie am schnellsten den passenden CSS-Wert für jeden Gestaltungsfall.
Hauptfunktionen
- Umrechnung zwischen 10 CSS-Einheiten: px, rem, em, %, vw, vh, pt, cm, mm und in
- Alle Umrechnungen gleichzeitig in einem responsiven Raster
- Anpassbare Basisschriftgröße für genaue Berechnungen mit rem, em und Prozent
- Einstellbare Viewport-Breite und -Höhe für präzise Umrechnungen mit vw und vh
- Kopieren in die Zwischenablage per Klick, inklusive Einheit
- Sofortiger Einheitentausch, um jeden umgerechneten Wert als neue Quelle zu übernehmen
- Schnellvorgaben für gängige Werte wie 1rem, 100vw, 50% und übliche Schriftgrößen
- Einheitenbeschreibungen, die zeigen, wofür jede CSS-Einheit steht
- Intelligente Zahlenformatierung mit passender Nachkommagenauigkeit
- Dunkelmodus für angenehmes Arbeiten in jeder Entwicklungsumgebung
So verwenden Sie den CSS-Einheitenrechner
- Wert eingeben: Geben Sie den umzurechnenden Zahlenwert in das Eingabefeld oben im Tool ein.
- Ausgangseinheit wählen: Wählen Sie im Dropdown-Menü die CSS-Einheit Ihres Werts (px, rem, em, %, vw, vh, pt, cm, mm oder in).
- Einstellungen bei Bedarf anpassen: Passen Sie die Basisschriftgröße (Standard 16px) und die Viewport-Maße (Standard 1920x1080) an die Konfiguration Ihres Projekts an.
- Alle Umrechnungen ansehen: Alle 10 Umrechnungen erscheinen sofort im Raster darunter. Die Ausgangseinheit ist zur leichteren Erkennung blau hervorgehoben.
- Kopieren oder tauschen: Klicken Sie auf das Kopiersymbol, um einen umgerechneten Wert samt Einheit zu kopieren, oder auf das Tauschsymbol, um diesen Wert als neue Quelle für weitere Umrechnungen zu übernehmen.
Anwendungsfälle
- Responsive Design: Rechnen Sie pixelbasierte Entwürfe aus Figma oder Sketch in rem und em um, für skalierbare, barrierefreie CSS-Layouts.
- Barrierefreiheit: Stellen Sie von festen px-Werten auf relative rem/em-Einheiten um, damit Ihre Layouts die Schriftgrößeneinstellungen der Nutzer und die WCAG-Richtlinien berücksichtigen.
- Viewport-basierte Layouts: Berechnen Sie exakte vw- und vh-Werte für Vollbild-Abschnitte, responsive Typografie und fließende Abstände.
- Druck-Stylesheets erstellen: Rechnen Sie Bildschirmeinheiten in druckgeeignete Werte in pt, cm, mm und in für CSS-@media-print-Stylesheets um.
- Design-System-Entwicklung: Schaffen Sie einheitliche Abstands- und Typografieskalen, indem Sie Ihre Design-Tokens zwischen Einheitensystemen umrechnen.
- Wechsel des CSS-Frameworks: Rechnen Sie zwischen Einheitensystemen um, wenn Sie von einem CSS-Framework oder einer Methodik zu einer anderen wechseln.
- Plattformübergreifende Entwicklung: Sorgen Sie für einheitliche Größen im Web, im mobilen Web und in Hybrid-Apps, indem Sie zwischen plattformspezifischen Einheiten umrechnen.
Häufig gestellte Fragen
Ist dieses Tool kostenlos?
Ja, der CSS-Einheitenrechner ist komplett kostenlos. Es gibt keine Nutzungsgrenzen, kein Konto und keine Premium-Funktionen. Rechnen Sie so viele Werte um, wie Sie möchten.
Sind meine Daten sicher?
Auf jeden Fall. Alle Umrechnungen werden vollständig in Ihrem Browser mit JavaScript berechnet. Es werden keine Daten an einen Server gesendet. Das Tool funktioniert nach dem Laden der Seite komplett offline.
Warum muss ich eine Basisschriftgröße festlegen?
Relative Einheiten wie rem, em und % beziehen sich auf eine Referenzschriftgröße. Die meisten Browser verwenden standardmäßig 16px, Ihr Projekt kann aber eine andere Basis nutzen. Mit der richtigen Basisschriftgröße werden die Umrechnungen für die Konfiguration Ihres Projekts genau.
Was ist der Unterschied zwischen rem und em?
Sowohl rem als auch em beziehen sich auf die Schriftgröße, aber rem bezieht sich immer auf die Schriftgröße des Wurzelelements (html), während em sich auf die Schriftgröße des übergeordneten Elements bezieht. In diesem Umrechner verwenden beide die Einstellung der Basisschriftgröße, da der konkrete DOM-Kontext nicht verfügbar ist.
Wie werden Viewport-Einheiten berechnet?
1vw entspricht 1% der Viewport-Breite und 1vh entspricht 1% der Viewport-Höhe. Der Umrechner verwendet für diese Werte die von Ihnen festgelegten Viewport-Maße (Standard 1920x1080). Passen Sie die Einstellungen an Ihre Zielbildschirmgröße an, um genaue Ergebnisse zu erhalten.
Wie funktioniert die Umrechnung von px in pt?
Die Umrechnung nutzt das übliche Verhältnis von 96 CSS-Pixeln pro Zoll und 72 Punkten pro Zoll. Daher entspricht 1pt etwa 1,333px (96/72). Dieses Verhältnis gilt in allen modernen Browsern und Betriebssystemen einheitlich.
Tipps und bewährte Vorgehensweisen
- rem für Typografie verwenden: Legen Sie die Basisschriftgröße am html-Element fest und verwenden Sie rem für alle Textgrößen, damit die Typografie auf Ihrer Website einheitlich und barrierefrei bleibt.
- Relative Einheiten bevorzugen: Verwenden Sie rem, em und % für Abstände und Layout, damit sich Ihre Designs an Nutzereinstellungen und unterschiedliche Bildschirmgrößen anpassen.
- Projekteinstellungen übernehmen: Legen Sie im Umrechner stets Basisschriftgröße und Viewport-Maße passend zur tatsächlichen Konfiguration Ihres Projekts fest, um genaue Ergebnisse zu erhalten.
- Viewport-Einheiten sparsam einsetzen: vw und vh sind stark für fließende Layouts, können aber in mobilen Browsern Probleme verursachen, in denen sich die Viewport-Größe beim Scrollen ändert. Erwägen Sie CSS clamp() für robustere responsive Werte.
- Auf verschiedenen Geräten testen: Testen Sie Ihr CSS nach der Umrechnung der Einheiten auf mehreren Geräten und Bildschirmgrößen, um zu prüfen, ob die Werte das gewünschte Ergebnis liefern.
- Häufige Umrechnungen merken: Nutzen Sie die Schnellvorgaben für oft benötigte Werte wie 1rem, übliche Schriftgrößen und gängige Viewport-Berechnungen, um Ihren Arbeitsablauf zu beschleunigen.