🚀 Schnellstart

Wert und Einheit eingeben: z. B. 16 + px oder 1 + rem
Kontext setzen: Root/Parent‑Schriftgröße, Viewport‑Größe und DPI konfigurieren (beeinflusst rem/em/vw/vh/pt/cm etc.)
Ergebnisse anzeigen: übrige Einheiten werden sofort berechnet und sind kopierbar
Breakpoints: mobil/Tablet/Desktop‑Voreinstellungen zum Validieren umschalten

📌 Häufige Szenarien

Einsatz: Responsive Layouts, Übergabe Design→Dev, Dichte/Print‑Bezug, einheitliche Konventionen

🧭 Nutzungstipps

Basis setzen: 16px‑Root ist gängig und erleichtert rem ↔ px Kopfrechnen
Text in rem: ermöglicht globale Skalierung & A11y; em für komponentenlokale Skalierung
Layout mit Viewport‑Einheiten: mit Breakpoints und clamp/min/max kombinieren
Dezimalstellen & Rundung: sinnvolle Präzision wahren

🎛️ Parameter & Kontext

REM base (Root Font Size): bestimmt rem ↔ px. 16px ist üblich (1rem≈16px). Bei abweichender Design‑Basis anpassen.
EM base (Parent Font Size): bestimmt em und % (bei Referenz Schriftgröße). Gut für komponentenlokale Skalierung.
% Bezug: je nach Kontext Schriftgröße / Breite / Höhe wählen (Layout vs Typografie).
Breakpoint‑Voreinstellungen setzen auch die Viewport‑Größe für die Schätzung (keine Laufzeit‑Media‑Query).
Viewport‑Größe für vw/vh/vmin/vmax und % (Breite/Höhe). Geräte können durch Adressleisten/Safe Areas/Scrollbars variieren.
DPI für pt/pc/in/cm/mm/q ↔ px. Standard 96; für Druck/HiDPI Gerätekonfiguration verwenden.
Tipps: 1) 16px & 96 DPI als Basis; 2) Prozent‑Layout mit Breakpoints prüfen; 3) dient der Entwurfs‑Schätzung, nicht der finalen CSS‑Berechnung.

⚠️ Einschränkungen & Kompatibilität

%‑Bezug hängt von der Eigenschaft ab (width/height/line‑height unterscheiden sich); Tool schätzt gängige Fälle
ex/ch basieren auf Font‑Metriken; Ergebnisse variieren je Font/Browser
Viewport‑Einheiten variieren mit Scrollbars/Adressleiste/Safe‑Areas
Physische Einheiten ↔ px variieren mit DPI; Print/HiDPI verifizieren

🔒 Datenschutz & Sicherheit

Die gesamte Verarbeitung erfolgt in Ihrem Browser; Daten verlassen Ihr Gerät nicht

❓ FAQ

Unterschied zwischen rem und em?

rem bezieht sich auf die Root‑Schriftgröße (vorhersagbare globale Skalierung); em auf die Eltern‑Schriftgröße (für lokale Skalierung)

px oder rem verwenden?

Für Layout/Text rem bevorzugen (A11y); px ist für pixelgenaue Icons/Rahmen geeignet

Warum verhalten sich vw/vh geräteabhängig unterschiedlich?

Adressleisten/Safe‑Areas/Scrollbars beeinflussen den Viewport; mit clamp()/min()/max() und Breakpoints kombinieren

Bildschirm‑Pixel in Druckeinheiten umrechnen?

DPI setzen (z. B. 96/72/300). Hier nur Schätzung; für Produktion per ICC/Proof prüfen