Die Umrechnung von CSS-Einheiten ist der Prozess, verschiedene Längeneinheiten (px, em, rem, %, vw, vh usw.) im Webdesign ineinander zu überführen.
Absolute und relative Einheiten
CSS-Einheiten werden grob in absolute und relative Einheiten unterteilt. Absolute Einheiten (px, pt, cm usw.) sind fest, relative Einheiten (em, rem, %, vw, vh usw.) werden als Verhältnis zu einer Basis angegeben.
px (Pixel)
Die gebräuchlichste Einheit, repräsentiert einen Punkt auf dem Bildschirm. Einfach zu handhaben, kann jedoch Zugänglichkeitsprobleme verursachen, da sie Nutzer-Schriftgrößen ignoriert.
em (Em)
Relative Einheit, basierend auf der Schriftgröße des übergeordneten Elements. 1em = font-size des Elternteils. In verschachtelten Strukturen kumuliert sie und kann zu unerwarteten Größen führen.
rem (Root Em)
Relative Einheit, basierend auf der Schriftgröße des Root-Elements (html). 1rem = font-size von html (typisch 16px). Anders als em ist rem nicht von Verschachtelung betroffen und wird in modernem CSS empfohlen.
% (Prozent)
Stellt einen Anteil am Elternelement dar. Bei font-size ist es relativ zur Schriftgröße des Elternteils; bei width zur Breite des Elterns. Die Basis variiert je nach CSS-Eigenschaft.
vw/vh (Viewport-Einheiten)
Einheiten, die auf der Viewport-Größe basieren. 1vw = 1% der Viewport-Breite, 1vh = 1% der Viewport-Höhe. Ermöglichen flexible Layouts, die auf Bildschirmgröße reagieren.
pt/pc (Druckeinheiten)
Einheiten aus dem Druckwesen. 1pt = 1/72 Zoll, 1pc = 12pt. Verwendet in Print-CSS und PDF-Generierung; für Bildschirmdarstellung werden meist px oder rem genutzt.
Physikalische Einheiten (cm/mm/in)
Einheiten, die reale physikalische Längen repräsentieren. 1in = 2.54cm = 25.4mm = 96px (CSS-Definition). Nützlich für Konsistenz mit Druckmaterialien, jedoch ist die physische Bildschirmgröße variabel.
Vorteile der Echtzeit-Konvertierung
Dieses Tool unterstützt Echtzeit-Konvertierung und aktualisiert Ergebnisse sofort bei Änderung von Basiswerten. Erlaubt schnelle Überprüfungen für verschiedene Bildschirmgrößen und Schrift-Einstellungen.