px-zu-rem-Umrechner
Bei einer Wurzel von 16 px sind 16 px genau 1 rem und 0,5 rem sind 8 px. Rechnen Sie CSS-Längen zwischen Pixeln und rem mit der Wurzel-Schriftgröße Ihres Stylesheets um und erhalten Sie einen einfügefertigen Wert samt Formel und Rechenschritten. Kostenlos in Ihrem Browser.
- Kostenlos
- Läuft in Ihrem Browser
- Ohne Anmeldung
- Ihre Daten bleiben auf Ihrem Gerät
Im Browser ausführen – kostenlos
Rechenbeispiel
- Wert
- 16
- Von
- px
- Nach
- rem
- Basis
- 16
- Ergebnis
- 1 rem
- Umgerechnet
- 1
- Css
- 1rem
Ein px-zu-rem-Umrechner überträgt eine CSS-Länge in Pixel oder rem in die jeweils andere Einheit und nutzt dabei die Wurzelschriftgröße, die Sie tatsächlich ausliefern. Theme-Migrationen, Fluid-Type-Audits, die Übergabe von Figma zu CSS und die Schriftskalierung für Barrierefreiheit brauchen alle dieselbe deterministische Rechnung rem gleich px durch Wurzel, ohne einen Browser-Inspektor zu öffnen.
Was px und rem für die CSS-Typografie bedeuten
In CSS ist eine Pixellänge (px) eine absolute Längeneinheit, die überall in Layouts, Rahmen und alten Typografie-Tokens verwendet wird. Eine rem-Länge ist relativ zur font-size des Wurzelelements — fast immer das html-Element —, sodass ein rem dem entspricht, was diese Wurzel-font-size in Pixel ist. Ist die Wurzel sechzehn Pixel, dann entsprechen sechzehn px einem rem, zweiunddreißig px zwei rem und null Komma fünf rem acht px.
Design-Systeme bevorzugen rem für Typenskalen und Abstände, weil Nutzer, die die Standardschrift des Browsers vergrößern oder eine größere Wurzel für die Barrierefreiheit setzen, ein proportionales Wachstum erhalten, ohne jeden fest kodierten Pixelwert zu durchsuchen. Die Umrechnung in die andere Richtung ist wichtig, wenn eine Bibliothek noch px-Tokens ausgibt oder wenn ein Designwerkzeug feste Pixelgrößen exportiert und Sie rem-Deklarationen brauchen, die zur produktiven Wurzel passen. Die Umrechnung selbst ist elementar: rem gleich px geteilt durch base, und px gleich rem multipliziert mit base, wobei base die Wurzelschriftgröße in Pixel ist.
Was Teams stolpern lässt, ist nicht die Formel, sondern unpassende Basen — die Annahme von sechzehn, während das Stylesheet die html-font-size auf zweiundsechzig Komma fünf Prozent (zehn px) oder auf einhundertzwölf Komma fünf Prozent (achtzehn px) setzt. Dieser Rechner erzwingt die Offenlegung der base, sodass das Ergebnis stets zur Skala passt, die Sie zu verwenden angeben. Basen von null oder nahe null werden abgelehnt, weil die Division durch null keine gültige CSS-Länge ist; Klassenzimmer-Demos und Unit-Tests sollten diesen Fehlerpfad einschließen, damit Clients rem niemals stillschweigend als unendlich behandeln.
Praktische Tipps, Grenzen und verwandte Suchanfragen
Halten Sie value und base innerhalb des veröffentlichten Absolutbereichs, damit Produkte nicht in ein nicht-endliches Ergebnis überlaufen, das der Löser ablehnen muss. Senden Sie lieber Zahlen als vorformatierte Zeichenketten, wenn Sie den Client steuern; Zahlen-Zeichenketten werden nur akzeptiert, wenn sie einem strengen endlichen Zahlenmuster entsprechen. Dokumentieren Sie die Wurzelschriftgröße neben jeder Token-Tabelle: Nutzt html zweiundsechzig Komma fünf Prozent der Nutzer-Vorgabe, so ist base zehn px bei einer Sechzehn-Pixel-User-Agent-Vorgabe, und eine vierundzwanzig-px-Überschrift wird zu zwei Komma vier rem — nicht ein Komma fünf rem.
Bevorzugen Sie diese Fähigkeit, wenn Sie die Wurzelgröße in Pixel bereits kennen und nur die Längenumrechnung brauchen; benötigen Sie berechnete Stile aus einer echten Seite, verwenden Sie stattdessen Browser-Werkzeuge. Hin-und-Rück-Prüfungen sind einfach: Rechnen Sie px in rem und mit derselben base zurück und bestätigen Sie den ursprünglichen value innerhalb derselben Zwölf-Dezimal-Rundung.
Anwendungsfälle
Design-Token-Tabellen aus Figma-Pixeln
Exportieren Sie Abstands- und Typgrößen als px aus Designwerkzeugen, setzen Sie base auf Ihre produktive Wurzelschriftgröße und geben Sie rem-Tokens aus, die zum Live-Stylesheet passen.
Theme-Migration von px zu rem
Wandeln Sie alte Pixel-Typografie und -Abstandsskalen im Stapel in rem um und dokumentieren Sie die genaue base, die für jeden Stapel verwendet wurde.
Unit-Tests für CSS-Längenhelfer
Erzeugen Sie bekannte, korrekte px↔rem-Paare sowie bewusste Ablehnungen bei base null für Frontend-Hilfsbibliotheken und Design-System-Pakete.
Häufige Fragen
Wie rechnet man px in rem um?
Teilen Sie die Pixellänge durch die Wurzelschriftgröße in Pixel: rem = px / base. Bei einer 16px-Wurzel werden 24px zu 1,5rem.
Wie rechnet man rem in px um?
Multiplizieren Sie die rem-Länge mit der Wurzelschriftgröße in Pixel: px = rem × base. Bei einer 16px-Wurzel werden 1,25rem zu 20px.
Rechnet dies em- oder %-Einheiten um?
Nein. Es rechnet nur zwischen px und rem mit einer ausdrücklichen Wurzelbasis in Pixel um. Em ist relativ zu einem Elternelement, nicht zur Wurzel.
Welche Basis nehme ich, wenn mein Stylesheet html auf 62,5 % setzt?
Nehmen Sie 10 px, denn 62,5 % der 16 Pixel Browser-Standard sind zehn Pixel. Mit dieser Basis ist eine 24-px-Überschrift 2,4 rem und nicht 1,5 rem wie bei einer Basis von 16.
Warum darf die Basis nicht null sein?
Bei einer Wurzel-Schriftgröße von null ist der Maßstab nicht definiert. Der Umrechner weist eine solche Basis daher mit einer klaren Meldung zurück, statt unendliche Längen auszugeben.
Verwandte Tools
Für Entwickler — API-Zugang
Alles auf dieser Seite ist auch per API verfügbar. Dieser Abschnitt richtet sich an Teams, die es in ihre eigenen Systeme einbinden möchten; alle anderen nutzen einfach das Tool oben.
Endpunkt
Authentifizierung per Bearer-Token. Ein einziger POST stellt die Aufgabe in die Warteschlange; das Ergebnis erhalten Sie per Webhook oder über einen signierten Link.
Aufruf aus Ihrem Stack
curl -X POST https://api.kit.forhosting.com/conv/typography-px-rem \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"value":16,"from":"px","to":"rem","base":16}'const res = await fetch("https://api.kit.forhosting.com/conv/typography-px-rem", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"value": 16,
"from": "px",
"to": "rem",
"base": 16
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/conv/typography-px-rem",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"value": 16,
"from": "px",
"to": "rem",
"base": 16
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/conv/typography-px-rem", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"value":16,"from":"px","to":"rem","base":16}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"value":16,"from":"px","to":"rem","base":16}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/conv/typography-px-rem", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Beispiel-Anfrage
{
"value": 16,
"from": "px",
"to": "rem",
"base": 16
}Beispiel-Antwort
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "conv.typography_px_rem",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}Die API arbeitet asynchron: Sie erhalten sofort eine task_id. Polling ist mit 1 Anfrage pro Sekunde erlaubt.
Preis
Der Preis steht auf der Seite – keine Tokens, keine Credits. Fehlgeschlagene Aufgaben werden nicht berechnet.
Limits
max_abs | 1000000000000 |
Fehler
| HTTP | Code | Bedeutung |
|---|---|---|
401 | unauthorized | Der API-Schlüssel fehlt oder ist ungültig – prüfen Sie den Authorization-Header (Bearer). |
402 | insufficient_balance | Ihr Guthaben reicht für diese Aufgabe nicht aus – Aufladungen verfallen nicht. |
404 | unknown_type | Unbekannter Aufgabentyp – prüfen Sie das Feld „type“ gegen den Katalog. |
429 | rate_limited | Zu viele Anfragen – warten Sie kurz; Polling ist mit 1 Anfrage pro Sekunde erlaubt. |
Technische Hinweise
Geben Sie den numerischen value ein, wählen Sie from und to als px oder rem und setzen Sie base auf die Wurzel-(html-)Schriftgröße in Pixel — üblicherweise sechzehn in Desktop-Browsern, in Design-Systemen mitunter vierzehn oder achtzehn. Das Werkzeug liefert die umgerechnete Größe, eine einfügefertige css-Zeichenkette wie ein rem oder sechzehn px, die verwendete Formel und die schrittweise Einsetzung, damit Design-Tokens und Code-Reviews im Einklang bleiben. Ist base gleich null, ist die Skala undefiniert, sodass die API einen klaren invalid_input-Fehler zurückgibt, statt unendliche Längen zu erfinden. Der Pfad ist reine Arithmetik — ohne Netzwerk, ohne Zufallssaat, ohne Abhängigkeit von der Systemuhr — sodass der kostenlose Browserläufer und die per Guthaben bezahlte API bei jedem Aufruf nach fester Dezimalrundung dasselbe JSON zurückgeben.
Wie man die API aufruft und was zurückkommt
Senden Sie einen JSON-Körper mit vier Pflichtfeldern: value (Aliasse amount, n, length), from (Aliasse from_unit, unit_from, source), to (Aliasse to_unit, unit_to, target) und base (Aliasse root, root_font_size, root_px, base_px). value und base müssen endliche Zahlen sein, deren Absolutwerte innerhalb der veröffentlichten Grenze von einer Billion bleiben, damit Zwischenprodukte in IEEE-Double-Genauigkeit auf dem Worker und im Browser endlich bleiben. from und to müssen nach der Alias-Normalisierung px oder rem ergeben — pixel, pixels, rem, rems, root em und ähnliche Schreibweisen werden akzeptiert; unbekannte Einheitennamen geben invalid_input zurück. base muss von null verschieden sein; Absolutwerte bei oder unter eins mal zehn hoch minus fünfzehn werden als null behandelt und abgelehnt. Bei Erfolg spiegelt die Antwort die gerundeten value, from, to und base wider; setzt result und converted auf dieselbe gerundete Ausgabegröße; unit auf die Zieleinheit; css auf eine kompakte Zeichenkette wie ein rem oder vierundzwanzig px; formula auf rem gleich px durch base, px gleich rem mal base oder die Identitätsmeldung, wenn from gleich to ist; message auf eine kurze englische Zusammenfassung; und steps auf ein geordnetes Array von Einsetzungszeilen. Fehlgeschlagene Validierung — fehlende Felder, nicht-endliche Zahlen, Werte außerhalb der Absolutgrenzen, unbekannte Einheiten, base von null oder ein nicht-endliches Ergebnis — gibt invalid_input zurück und wird nie berechnet. Der Preis beträgt pauschal $0.002 pro erfolgreicher Anfrage bei Einheitenposition und einem marginalen Stückpreis von null.
Praktische Tipps, Grenzen und verwandte Suchanfragen
Ist from gleich to, gibt das Werkzeug den value unverändert zurück, sodass Pipelines Einheiten ohne Sonderfall normalisieren können, doch die base ist weiterhin erforderlich und wird weiterhin als von null verschieden geprüft. Beispielpaare zum Lehren und Testen: sechzehn px in rem bei Basis sechzehn ergeben ein rem; ein Komma fünf rem in px bei Basis sechzehn ergeben vierundzwanzig px; zwanzig px in rem bei Basis zehn ergeben zwei rem; und base null bei beliebigem value zeigt den harten invalid_input-Pfad. Diese Landingpage richtet sich an Personen, die einen px-zu-rem-Umrechner, einen rem-zu-px-Rechner oder ein Werkzeug für die CSS-Wurzelschriftgröße-Typografie suchen; sie ist kein em-Umrechner relativ zu einem Elternelement, kein Fluid-clamp-Generator und kein Viewport-Einheiten-Rechner. Fehlgeschlagene Aufgaben, die invalid_input zurückgeben, verbrauchen kein per Guthaben bezahltes Guthaben, was explorative Skripte günstig hält, wenn Entwickler base bewusst auf null setzen.
Technische Fragen
Was passiert, wenn base null ist?
Die Umrechnung ist undefiniert. Dieses Werkzeug gibt invalid_input zurück, statt durch null zu teilen oder unendliche Längen zu erfinden.
Ist der px-zu-rem-Umrechner kostenlos?
Das Browser-Werkzeug ist kostenlos und läuft lokal. API-Aufrufe nutzen das per Guthaben bezahlte KIT-Konto zu $0.002 pro erfolgreicher Anfrage; fehlgeschlagene Aufgaben werden nie berechnet.