PX-zu-EM-Umrechner
Dieser px-zu-em-Umrechner überträgt eine CSS-Länge von Pixel in em-Einheiten oder von em zurück in Pixel und nutzt dabei die Schriftgröße des Elternelements in Pixel als Referenzbasis.
Im Browser ausführen – kostenlos
Relative Typografie hängt von dieser Basis ab: ein em entspricht der berechneten Schriftgröße des Elternelements, also sind sechzehn Pixel bei einer Sechzehn-Pixel-Basis ein em, und ein Komma fünf em sind bei derselben Basis vierundzwanzig Pixel. Die hier verwendeten Identitäten sind vollständig deterministisch: em gleich px geteilt durch base, und px gleich em mal base. Kleine Kontrollen, die Sie vielleicht schon kennen: vierundzwanzig Pixel in em bei Basis sechzehn ergeben ein Komma fünf, und null Komma acht sieben fünf em in Pixel bei Basis sechzehn ergeben vierzehn. Die Engine nutzt ausschließlich endliche Arithmetik ohne Netzwerkaufrufe, ohne Sampling und ohne datumsabhängige Abkürzungen. Nutzen Sie sie kostenlos im Browser für Design-Tokens, Stylesheet-Umschreibungen und Barrierefreiheitsaudits, oder rufen Sie die API zu $0.002 pro erfolgreicher Anfrage auf, wenn Sie reproduzierbare CSS-Längen-Fixtures in CI, Design-Systemen oder Lehrdemos benötigen.
So verwenden Sie das Werkzeug
Geben Sie Ihre Werte in das Formular oben ein. Das Werkzeug prüft sie vor der Berechnung und zeigt das Ergebnis auf derselben Seite.
Eingaben prüfen
Beachten Sie die Beschriftungen und Einheiten der Felder. Fehlt etwas oder liegt ein Wert außerhalb des erlaubten Bereichs, zeigt die Seite das zu korrigierende Feld.
Erneut berechnen oder automatisieren
Nutzen Sie das Web-Werkzeug für einzelne Prüfungen und die API, wenn Sie dieselbe Funktion automatisieren möchten.
Anwendungsfälle
Sofort ein Ergebnis erhalten
Geben Sie einen Satz Werte ein und sehen Sie das Ergebnis ohne Tabellenkalkulation oder Skript.
Szenarien vergleichen
Ändern Sie jeweils einen Wert und berechnen Sie erneut, um den Einfluss auf das Ergebnis zu sehen.
Wiederholte Aufgaben automatisieren
Nutzen Sie die API, wenn dieselbe Berechnung in Ihrem Produkt oder Ablauf laufen soll.
Häufige Fragen
Wie verwende ich diese Funktion?
Füllen Sie die Felder oben aus und starten Sie sie auf dieser Seite. Das Formular markiert Angaben, die korrigiert werden müssen.
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-em \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"value":16,"base":16,"from":"px","to":"em"}'const res = await fetch("https://api.kit.forhosting.com/conv/typography-px-em", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"value": 16,
"base": 16,
"from": "px",
"to": "em"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/conv/typography-px-em",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"value": 16,
"base": 16,
"from": "px",
"to": "em"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/conv/typography-px-em", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"value":16,"base":16,"from":"px","to":"em"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"value":16,"base":16,"from":"px","to":"em"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/conv/typography-px-em", 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,
"base": 16,
"from": "px",
"to": "em"
}Beispiel-Antwort
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "conv.typography_px_em",
"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_value | 1000000000000000 |
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. |