Umrechner px ⇄ rem
Rechne für CSS Pixel in rem und em um (und zurück). Lege die Basisgröße fest (meist 16 px) und erhalte den Wert sofort.
Wofür es gut ist
Modernes CSS verwendet oft rem und em statt Pixeln, für skalierbare und barrierefreie Layouts. Dieses Tool rechnet sofort um, damit du es nicht im Kopf ausrechnen musst.
Basis 16 px
Standardmäßig gilt 1 rem = 16 px (die Standard-Schriftgröße des Browsers). Gilt für das Root-Element eine andere font-size, passe die Basis an, damit der Wert stimmt.
rem und em: der Unterschied, der sich rächt
Sie wirken wie zwei Namen für dieselbe Sache, sind es aber nicht. Die Einheit rem bezieht sich immer auf das Root-Element des Dokuments, deshalb ist 1.5rem überall auf der Seite gleich groß. Die Einheit em bezieht sich auf das Elternelement, und deshalb multipliziert sie sich: Ein Element mit 1.2em in einem anderen mit 1.2em ist am Ende 1,44-mal so groß, bei drei Verschachtelungsebenen 1,73-mal. Deshalb wächst bei einer Liste in einer Liste oder einem Menü in einer Box die Schrift, ohne dass es jemand wollte.
Die Faustregel, die fast immer stimmt: rem für Schriftgrößen und Abstände der Seite, em nur dort, wo ein Maß wirklich der Schrift des Elements selbst folgen soll, etwa beim Padding eines Buttons, das dann bei jeder Größe im richtigen Verhältnis bleibt.
Warum man für Text keine Pixel verwendet
Das ist kein Purismus: Wer eine größere Schrift braucht, ändert die Standard-Schriftgröße in den Browsereinstellungen, und Text in px rührt sich um keinen Pixel. Mit rem wächst die ganze Seite mit und behält ihr Layout. Es ist eine der wenigen CSS-Entscheidungen mit direkter Wirkung für Menschen mit Sehschwäche, und genau deshalb verlangen es auch die Richtlinien zur Barrierefreiheit.
Für Rahmen, Schatten und dünne Linien sind Pixel völlig in Ordnung: Dort soll die Größe nicht der Schrift folgen, und ein 1px-Rahmen ist genau das, was du willst.
Der Trick mit 62,5 % und warum du besser darauf verzichtest
Jahrelang schrieb man html { font-size: 62.5% } in die Stylesheets: So war 1rem gleich 10px, und man konnte im Kopf rechnen. Das funktioniert, hat aber zwei Schwächen: Wer dieses CSS liest, ohne den Trick zu kennen, liegt bei jedem Maß daneben, und vor allem wird die Grundschrift 10px groß bei allem, wofür keine spezifischere Regel gilt. Mit einer Seite wie dieser musst du nicht im Kopf rechnen, also kann die Basis bleiben, wie sie von Haus aus ist.
Ein Detail, das viele überrascht: In Media Queries ignoriert rem die am Root-Element gesetzte font-size und nimmt immer den Standardwert des Browsers. Die Bedingung @media (min-width: 40rem) greift also bei 640px, auch wenn du 62,5 % eingestellt hast.
Siehe auch
Für CSS-Farben gibt es den Farbkonverter, für Schatten den Box-Shadow-Generator und für abgerundete Ecken den Border-Radius-Generator. Wenn das CSS vor der Veröffentlichung schlanker werden soll, hilft dir der CSS-Minifier.