Skip to main content
CalculoraCalculora

Finanzen & Wirtschaft

FinanzrechnerInvestition & PlanungPersönliche FinanzenImmobilieninvestitionBusiness-ToolsStartup & Software-Unternehmen

Mathematik & Technik

Mathe-RechnerTechnische ToolsPhysik-WerkzeugeEntwicklertoolsSchul-Tools

Gesundheit & Leben

Medizinische WerkzeugeIntelligentes DienstprogrammZufallsgeneratoren

Kreativ & Spezial

SchöpferökonomieIslamische ToolsNachhaltigkeitSpiele

Umrechner

EinheitenumrechnerLängenumrechnerGewichtsumrechnerTemperaturumrechner→ Einheitenumrechner

Zufallsgeneratoren

ZufallszahlengeneratorPasswortstärke-PrüferGlücksradMünzwurf-SimulatorWürfel-SimulatorZeitzonen-Überschneidungsrechner→ Zufallsgeneratoren
Datei-Konverter

PDF-Tools

PDF zu JPG konvertierenPDF zu PNG konvertierenKonvertieren Sie PDF in TXTPDF in GIF konvertierenPDF in WebP konvertierenPDF in SVG konvertierenKonvertieren Sie PDF in DOCXPDF in Excel umwandelnPDF in PowerPoint umwandelnPDF in HTML umwandelnPDF in Markdown umwandelnPDF in TIFF umwandeln

Bild-Konverter

JPG zu PNG konvertierenPNG zu JPG konvertierenPNG zu WebP konvertierenWebP in PNG konvertierenWebP in JPG konvertierenJPG in WebP konvertierenSVG in PNG umwandelnSVG in JPG umwandelnSVG in WebP konvertierenBMP in PNG konvertierenBMP in JPG konvertierenBMP in WebP konvertieren

Erweiterte Bilder

HEIC in JPG konvertierenHEIC in PNG konvertierenTIFF in JPG konvertierenTIFF in PNG konvertierenJPG in TIFF konvertierenPNG in TIFF konvertierenJPG in ICO konvertierenPNG in ICO konvertierenKonvertieren Sie JPEG in AVIFPNG in AVIF konvertieren

GIF und Animation

GIF-Frames zu PNG konvertierenGIF-Frames zu JPG konvertierenKonvertieren Sie GIF in einzelne Frames (PNG/JPEG)PNG in GIF konvertierenJPG in GIF konvertierenGIF in WebP konvertieren

Bildbearbeitung

Wasserzeichen hinzufügenObjekt aus Bild entfernenBildgröße sofort im Browser ändernBilder online komprimieren — Dateigröße reduzieren, Qualität erhalten
Mathe-Speed-ChallengeKopfrechnen-ChallengeWordleBint WaladSudoku2048
Währungsrechner
CalculoraCalculora

Ihre All-in-One-Rechnerplattform. Kostenlose, schnelle und präzise Tools für jeden Bedarf.

Rechner-Eingaben bleiben zu 100% privat — alle Berechnungen erfolgen in Ihrem Browser und erreichen nie unsere ServerFür immer kostenlos — keine Bezahlschranken, keine Abos, keine Konten nötig

Beliebt

  • BMI-Rechner
  • Kreditrechner
  • Altersrechner
  • Hypothekenrechner
  • Prozentrechner
  • Wissenschaftlicher Rechner

Mathe

  • Statistikrechner
  • Gleichungslöser
  • Bruchrechner
  • Primfaktorzerlegung Rechner
  • ggT und kgV Rechner
  • Logarithmusrechner

Finanzen

  • Finanzielle Unabhängigkeit Früher Ruhestand-Rechner
  • Schulden-Schneeball-Rechner
  • Investitionsrechner
  • Ruhestandsrechner
  • Gehaltsrechner
  • Kapitalrendite-Rechner

Rechtliches

  • Alle ansehen
  • Kategorien
  • Währungsrechner
  • Seitenverzeichnis
  • Spiele & Spielzeug
  • Über uns
  • Kontakt
  • Datenschutzerklärung
  • Allgemeine Geschäftsbedingungen
  • Haftungsausschluss

Sprachen

  • enEnglish
  • arالعربية
  • esEspañol
  • deDeutsch
  • frFrançais
  • hiहिन्दी
  • idBahasa Indonesia
  • itItaliano
  • ja日本語
  • ko한국어
  • ptPortuguês
  • ruРусский
  • trTürkçe
  • viTiếng Việt
  • bnবাংলা
  • zh中文
  • nlNederlands
  • plPolski
  • ukУкраїнська
  • msBahasa Melayu
  • thภาษาไทย

© 2026 Calculora. Alle Rechte vorbehalten.

Erstellt mit — 100% kostenlos

Leichtgewichtig & schnell — Cookies und Analysen laufen nur mit Ihrer Zustimmung

  1. Startseite
  2. Entwicklertools
  3. CSS-Einheiten-Umrechner

CSS-Einheiten-Umrechner

Rechnen Sie sofort zwischen px, rem, em, pt, vw, vh und % um, mit Ihrer eigenen Basis-Schriftgröße und Viewport-Abmessungen – kein Rätselraten mehr, was 1,5rem tatsächlich in Pixeln bedeutet.

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.

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

Berechnung

  1. Geben Sie den umzurechnenden Wert ein und wählen Sie seine Ausgangseinheit.
  2. Legen Sie Ihre Basis-Schriftgröße fest (Standard ist der Browser-Standard von 16px).
  3. Geben Sie für vw/vh-Umrechnungen Ihre Ziel-Viewport-Breite und -Höhe ein.
  4. Lesen Sie den entsprechenden Wert in jeder anderen Einheit sofort ab.

Beispiel

Bei einer Basis-Schriftgröße von 16px entspricht 1,5rem 24px. Bei einer Viewport-Breite von 1440px entspricht 5vw 72px.

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

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

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

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

Häufige 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

Häufig gestellte Fragen

Was ist der Unterschied zwischen rem und em?
rem bezieht sich immer auf die Schriftgröße des Wurzelelements (html), sodass es unabhängig von der Verschachtelungstiefe eines Elements konsistent bleibt. em bezieht sich auf die Schriftgröße des aktuellen Elements selbst, was bedeutet, dass es sich bei Verschachtelung aufsummieren kann – dieses Tool behandelt beide zur Vereinfachung gleich, unter Verwendung Ihrer Basis-Schriftgröße.
Warum entspricht 1rem üblicherweise 16px?
16px ist die Standard-Browser-Schriftgröße für das Wurzelelement html in praktisch jedem Browser. Da rem sich auf diese Wurzelgröße bezieht, entspricht 1rem 16px, sofern die Seite (oder die Browsereinstellungen des Nutzers) die Wurzel-Schriftgröße nicht explizit ändert.
Wofür werden vw und vh verwendet?
vw (Viewport-Breite) und vh (Viewport-Höhe) sind Prozentsätze der aktuellen Breite und Höhe des Browserfensters – 1vw entspricht 1 % der Viewport-Breite. Sie werden häufig für Vollbild-Layouts und responsive Typografie verwendet, die mit dem Bildschirm skaliert.
Ist ein Pixel immer genau 1/96 Zoll?
Laut CSS-Spezifikation ja – ein CSS-Pixel ist als 1/96 Zoll definiert, weshalb auch 1pt (1/72 Zoll) exakt 96/72 = 1,333 CSS-Pixel entspricht.

Verwandte Tools

Seitenverhältnis-Rechner
Bandbreitenrechner
Laden Sie den Zeitrechner herunter
Cloud-Hosting-Kostenrechner
CDN-Kostenrechner
Programmierschnittstelle Monetization Calculator
px
16
rem
1
em
1
pt
12
vw
1.1111
vh
1.7778
%
100