CSS-Einheiten-Konverter

Um Pixel in rem umzurechnen, teilst du den Pixelwert durch die Root-Schriftgröße, die Browser standardmäßig auf 16px setzen. So werden aus 24px also 24 / 16 = 1,5rem, aus 12px 0,75rem und aus 32px 2rem. Der Grund, warum Entwickler von px zu rem wechseln, ist Barrierefreiheit: rem skaliert mit der von einer Besucherin gewählten Browser-Schriftgröße, während fest codierte Pixel diese ignorieren, sodass Text für Menschen lesbar bleibt, die zoomen oder die Schrift vergrößern. Verwendet dein Projekt eine andere Root-Größe, ändert sich die Rechnung entsprechend, denn der Divisor muss zu deiner tatsächlichen html-Schriftgröße passen. Dieser Umrechner erledigt das sofort für alle Einheiten gleichzeitig, lässt dich eine eigene Root-Schriftgröße statt der Annahme von 16px festlegen und markiert die passende Tailwind-Klasse (16px entspricht zum Beispiel text-base), sodass du sie direkt in eine Utility-Class-Codebasis einfügen kannst.

Beides sind relative Schriftgrößen-Einheiten, aber sie beziehen sich auf unterschiedliche Bezugsgrößen. Ein rem bezieht sich immer auf die Schriftgröße des Wurzelelements, sodass 1rem überall auf der Seite unabhängig von der Verschachtelung demselben Pixelwert entspricht. Ein em bezieht sich auf die Schriftgröße des aktuellen Elements, wodurch es sich potenziert: Ist ein Elternelement 1,2em groß und ein darin verschachteltes Kindelement ebenfalls 1,2em, wird das Kindelement mit etwa dem 1,44-Fachen der Basisgröße gerendert, und tiefere Verschachtelung multipliziert weiter. Diese Potenzierung macht em nützlich für komponentenlokales Skalieren, etwa Innenabstände, die mit dem eigenen Text mitwachsen, kann aber in tiefen Baumstrukturen zu Überraschungen führen, während rem vorhersehbar bleibt. Dieses Tool lässt dich Root-Schriftgröße und Parent-Schriftgröße getrennt festlegen, sodass du genau siehst, wie sich ein em-Wert in deinem konkreten Verschachtelungskontext im Vergleich zu rem auflöst.

CSS verwendet einen festen Referenzstandard statt der tatsächlichen physischen Größe deines Bildschirms, weshalb die absoluten Einheiten relativ zueinander definiert sind. Nach diesem Standard entspricht 1 Zoll 96px und 72pt, wodurch 1pt ungefähr 1,333px entspricht und 1pc (Pica) genau 16px, da 1pc gleich 12pt ist. Bei den metrischen Einheiten entspricht 1cm etwa 37,8px (96 geteilt durch 2,54) und 1mm etwa 3,78px. Diese Umrechnungen sind vor allem in Print-Stylesheets relevant, wo Punkte und physische Einheiten tatsächlich auf Papier abgebildet werden, während ein Zoll auf Bildschirmen eine CSS-Abstraktion ist und kein gemessener Zoll. Statt dir diese Faktoren zu merken oder von Hand zu rechnen, gib einfach einen beliebigen Wert in diesen Umrechner ein, und er liefert das Äquivalent in px, pt, pc, cm, mm und in gleichzeitig mit Ein-Klick-Kopierfunktion.

Beides sind Viewport-Einheiten, die 1 % einer Viewport-Dimension entsprechen, beziehen sich aber auf unterschiedliche Dimensionen. vmin entspricht 1 % der kleineren Seite des Viewports, vmax entspricht 1 % der größeren Seite. Auf einem Smartphone im Hochformat, wo die Breite die kleinere Seite ist, folgt 10vmin der Breite und 10vmax der Höhe; drehst du das Gerät ins Querformat, tauschen die beiden, weil sich durch die Ausrichtung ändert, welche Seite kleiner ist. Das macht vmin nützlich für Elemente, die in beiden Ausrichtungen vollständig sichtbar bleiben müssen, etwa ein Quadrat, das niemals überlaufen darf, während vmax praktisch ist, wenn etwas mit der dominanten Dimension mitskalieren soll. Reguläres vw und vh dagegen sind fest an Breite beziehungsweise Höhe gebunden. Dieser Umrechner lässt dich deine eigene Viewport-Breite und -Höhe eingeben und zeigt dann, wie sich ein Wert für genau diesen Bildschirm in vw, vh, vmin und vmax auflöst.

Die Funktion clamp() nimmt drei Werte entgegen, einen Minimal-, einen bevorzugten und einen Maximalwert, geschrieben als clamp(min, preferred, max). Der Browser verwendet den bevorzugten Wert, lässt ihn aber nie unter das Minimum sinken oder über das Maximum steigen. Für fließende Typografie kombiniert der bevorzugte Wert eine rem-Basis mit einem vw-Anteil, sodass die Größe linear mit der Viewport-Breite zwischen zwei Breakpoints wächst, dann bei kleinen Bildschirmen beim Minimum und bei großen beim Maximum verharrt. Das vermeidet Text, der an jedem Media-Query-Breakpoint abrupt springt, und sorgt stattdessen für kontinuierliches Skalieren. Steigung und Achsenabschnitt von Hand zu berechnen ist umständlich, deshalb übernimmt das der Clamp-Generator dieses Tools für dich: Gib eine Mindest- und Höchstgröße sowie den Viewport-Bereich ein, über den die Skalierung stattfinden soll, wähle rem- oder px-Ausgabe und kopiere den fertigen clamp()-Wert direkt in dein Stylesheet.