01
Bezugsgrößen getrennt setzen
rem nutzt die Root-Schrift, em die Elternschrift. vw und vh beziehen sich auf die eingegebene Viewportbreite und -höhe, nicht automatisch auf dieses Browserfenster.
HTML / CSS / Frontend-Code
CSS Einheiten umrechnenBezugsgrößen statt Schätzwerte
Länge eingeben oder zu clamp, calc und Seitenverhältnis wechseln.
CSS Einheiten umrechnen
Eingabe
Die Werte werden nur in diesem Browser berechnet und nicht hochgeladen.
Ergebnis
px
24pxrem
1.5remem
1.5emvw
1.6667vwvh
2.6667vhOptionen
Berechnung fertig.
Wenn der Entwurf 24px vorgibt, die Komponente aber rem oder vw verwendet, reicht ein fester Faktor nicht aus. CSS Einheiten umrechnen verlangt deshalb die Root-Schriftgröße für rem, die Elternschrift für em und die Breite oder Höhe des Viewports für vw und vh.
Ein PX zu REM Rechner beantwortet nur einen Teil der Aufgabe. Hier lassen sich auch ein CSS Clamp Rechner und vw vh umrechnen nutzen. CSS Einheiten umrechnen verwendet dieselben Angaben beim Auswerten unterstützter calc()-Ausdrücke; die Ergebnisse bleiben damit vergleichbar.
Warum CSS Einheiten umrechnen?
Jede relative Zahl bleibt an ihren Bezugswert gebunden.
Fünf Einheiten aus einem Wert
CSS Einheiten umrechnen zeigt px, rem, em, vw und vh nebeneinander. Eine Änderung der Root-Schrift verändert rem, eine Änderung der Elternschrift em. Das Ergebnis gilt für die eingegebenen Werte und behauptet nicht, die Zielseite auszulesen.
Fließende Werte an zwei Ankern prüfen
Zwei Viewportbreiten mit ihren Zielgrößen bestimmen eine lineare vw-Steigung. Eine Vorschau für beispielsweise 768px zeigt, ob der Wert noch fließt oder bereits durch clamp() begrenzt ist.
Erst den Kontext, dann das Ergebnis prüfen
02
Aktualisierung bewusst steuern
Automatisch wird 350 ms nach einer Änderung gerechnet. Ist die Automatik aus, startet Ctrl/Cmd+Enter die Berechnung; ein veraltetes Ergebnis lässt sich nicht kopieren.
03
Zwischenwerte kontrollieren
Prüfe bei clamp() auch eine Breite zwischen den Ankern. Beim Seitenverhältnis lassen sich die gekürzte Verhältniszahl und die berechnete Zielhöhe vergleichen.
Vier Berechnungen mit gemeinsamen Grundlagen
Einheitentabelle mit Kontext
Ein Wert in px, rem, em, vw oder vh liefert alle fünf Darstellungen. Eine Zahl ohne Einheit gilt als px.
Generator für clamp()
Zwei Breiten und zwei Größen bestimmen eine lineare Formel. Grenzen in rem oder px und eine Vorschau bei wählbarer Breite sind verfügbar.
Eingeschränkter calc()-Rechner
Die fünf Längeneinheiten, Klammern und Grundrechenarten werden in px ausgewertet. Längen werden addiert oder subtrahiert; Multiplikation und Division brauchen einen einheitenlosen Faktor.
Seitenverhältnis aus Maßen
Ganzzahlige Breite und Höhe ergeben ein gekürztes Verhältnis, die CSS-Deklaration und eine Höhe für die angegebene Zielbreite.
Wo eine Umrechnung an Grenzen stößt
- Relative Werte brauchen den richtigen Bezug
- CSS Einheiten umrechnen liest keine berechneten Stile einer anderen Website. rem, em, vw und vh hängen von den vier eingegebenen Bezugswerten ab.
- calc() ist kein vollständiger CSS-Interpreter
- Prozentwerte, var(), env(), unbekannte Einheiten und inkompatible Dimensionen werden abgewiesen. Ohne enthaltenden Block und Kaskade wäre ein angeblicher px-Wert irreführend.
- clamp-Anker müssen geordnet sein
- Die erste Viewportbreite muss kleiner sein als die zweite, die Mindestgröße darf die Höchstgröße nicht überschreiten. Negative Größen erzeugen keine CSS-Formel.
- Keine Bildbearbeitung
- Quellbreite, Quellhöhe und Zielbreite müssen positive ganze Zahlen sein. Berechnet werden Höhe und aspect-ratio; ein Bild wird weder zugeschnitten noch skaliert.
Fragen zu CSS Einheiten umrechnen
Wie rechne ich px in rem um?
Teile den px-Wert durch die Root-Schriftgröße. Bei 16px sind 24px genau 1,5rem; bei einer anderen Root-Größe muss dieser Bezug angepasst werden.
Was unterscheidet em von rem?
rem bezieht sich auf das Wurzelelement, em auf die angegebene Elternschrift. Verschachtelte Elemente können darum andere em-Werte ergeben.
Welche Viewportgröße braucht die Umrechnung von vw und vh?
Für vw wird die Viewportbreite benötigt, für vh die Höhe: Eine Einheit ist jeweils ein Prozent. Ohne diese Maße ist die Umrechnung in px nicht eindeutig.
Wie berechne ich eine flüssige Schriftgröße mit clamp()?
Gib zwei Viewportbreiten und die gewünschten Größen an diesen Punkten ein. Daraus entsteht die vw-Steigung für clamp() samt Vorschau einer Zwischenbreite.
Warum stimmt mein rem-Ergebnis bei anderer Root-Schriftgröße nicht?
Die rem-Werte nutzen die hier eingetragene Root-Schrift. Bei einer Website mit anderer Grundeinstellung muss das Feld angepasst werden.
Noch eine Frage?
Jetzt CSS Einheiten umrechnen
Zurück zum Rechner: Länge vergleichen, Formel prüfen oder eine begrenzte fließende Größe erzeugen.