CSS Einheiten-Umrechner (px / rem / em / vh / vw)

Warum rem statt px

Browser starten mit 16px, aber Menschen mit eingeschränktem Sehvermögen erhöhen oft die Standardschriftgröße in ihren Browsereinstellungen. In rem gesetzter Text wächst mit dieser Einstellung, in px gesetzter Text nicht. Die Seitenvergrößerung vergrößert beides, aber auf die Schriftgrößeneinstellung verlassen sich viele Menschen. Außerdem erwartet das WCAG-Kriterium zur Textvergrößerung, dass Text ohne Verluste auf 200% skaliert werden kann. Setze Schriftgrößen und den dazugehörigen Abstand in rem und verwende px für Haarlinien und Rahmen.

Die em-Spalte und Verschachtelung

Ein em bezieht sich auf die eigene Schriftgröße des Elements, bei font-size selbst jedoch auf die des übergeordneten Elements. Die em-Werte hier setzen voraus, dass das übergeordnete Element die Grundgröße hat; das gilt nur auf der obersten Ebene. Innerhalb eines Elements mit 0.875em ergibt ein weiteres 0.875em 12.25px statt 14px, und die Verkleinerung setzt sich fort. Deshalb ist rem die sicherere Standardeinstellung, während em für Abstände geeignet ist, die mit dem Text ihrer Komponente skalieren sollen.

Die Basis von 62,5% und Viewport-Einheiten

Mit html { font-size: 62.5% } entspricht 1rem 10px, was die Berechnung erleichtert. Gib als Basisgröße 10 ein, um dies abzubilden. Dadurch wird alles andere, was in rem bemessen ist, einschließlich Komponenten von Drittanbietern, kleiner. Setze daher in body erneut eine gut lesbare Größe.

Die vw- und vh-Werte setzen einen Viewport von 1440 × 900 voraus. Auf Mobilgeräten kann 100vh größer als der sichtbare Bereich sein, solange die Browserleiste angezeigt wird. 100svh und 100dvh sind die Einheiten, die dies berücksichtigen.

So benutzt du es

1. Gib einen Pixelwert (px) und die Basis-Schriftgröße des Root-Elements ein (Standard 16px).
2. Sieh dir die berechneten Werte für rem, em, vw und vh an.
3. Kopiere einsatzbereite CSS-Codeausschnitte oder nutze die Skalentabelle.

Datenschutz & Einschränkungen

Läuft direkt im Browser mit clientseitigem JavaScript.