px in rem umrechnen Pixels ↔ Root em Kostenlos Online Sicher

Warum Designer und Entwickler px in rem umrechnen

Design-Werkzeuge sprechen in Pixeln. Ein Entwurf sagt, die Überschrift habe 32 px, der Abstand zwischen den Abschnitten 48 px, die Schaltfläche 16 px Innenabstand. Stylesheets sprechen, gut geschrieben, in rem. Die Lücke zwischen diesen beiden Sprachen ist der Ort dieser Seite: Sie geben eine Größe in Pixeln ein und lesen sie in rem ab, damit die Zahl, die Sie ins CSS schreiben, bedeutet, was die Designerin gemeint hat. px in rem umzurechnen ist ein kleiner Akt, doch er wird im Leben einer Website hundertfach vollzogen, und eine falsche Basis macht aus einem sorgfältigen Layout überall zugleich ein leicht falsches.

Der Grund, sich überhaupt mit rem zu befassen, sind Barrierefreiheit und Flexibilität. Ein rem ist ein Vielfaches der Schriftgröße des Wurzelelements, die ein Browser auf 16 px setzt, sofern nichts anderes gesagt wird, und die ein Leser in seinen Einstellungen frei ändern kann. Ein in rem geschriebenes Layout behält deshalb seine Form, wenn jemand mit schlechtem Sehvermögen die Standard-Textgröße erhöht: Schrift, Abstände und Kästen wachsen gemeinsam. Ein in Pixeln geschriebenes Layout folgt nicht, und der Leser, der um größeren Text gebeten hat, bekommt größere Buchstaben in beengten Kästen oder gar nichts. Deshalb sagt fast jeder moderne Styleguide dasselbe: Verwenden Sie rem für Schrift und Abstände.

Diese Seite rechnet in Ihrem Browser. Nichts wird hochgeladen, und das, wovon die Umrechnung abhängt, die Basisgröße, steht unten ausgeschrieben in einem Feld, das Sie ändern können, statt hinter Ihrem Rücken angenommen zu werden. Weiter unten finden Sie die Formel, die Tabelle gängiger Größen, die Gründe, warum die Basis wichtig ist, die Fallen, in die Menschen tappen, die px in Eile in rem umrechnen, und eine kurze Anleitung, das Ergebnis in echten Stylesheets zu verwenden.

Die Formel und die Basis

rem ist gleich px geteilt durch die Basis

Die Formel ist eine Division: rem = px ÷ Basis. Bei der üblichen Basis von 16 px wird eine Größe von 24 px zu 1,5 rem, 32 px zu 2 rem und 8 px zu 0,5 rem. Die Seite zeigt das Ergebnis beim Tippen und zeigt die verwendete Basis, die Zeile 24 px = 1,5 rem (16 px) sagt Ihnen also genau, was angenommen wurde.

Woher die 16 kommt

Die Basis beginnt bei 16 px, weil ein Browser diesen Wert nimmt, wenn niemand etwas anderes sagt. Es ist kein Gesetz des Webs; es ist der Standard des Standards, und er ist seit Jahrzehnten stabil. Berührt Ihr CSS die Schriftgröße der Wurzel nie, sind 1 rem für die meisten Besucher 16 px. Tut es das doch, ist die Basis, was Sie festgelegt haben.

Der 62,5-%-Trick und warum man ihn verwendet

Manche Stylesheets setzen die Wurzelgröße auf 62,5 %, womit 1 rem in einem Standard-Browser gleich 10 px ist, sodass 24 px einfach 2,4 rem sind und sich die Arithmetik im Kopf leicht erledigen lässt. Das funktioniert, hat aber seinen Preis: Die ganze Seite hängt nun von diesem Prozentwert ab, und jede Komponente, die 16 als Basis erwartet, kommt zu klein heraus. Macht Ihr Projekt das, geben Sie im Basisfeld dieser Seite 10 ein, und jeder Wert passt zu Ihrem CSS.

Was die Umrechnung behält und was nicht

Sie behält die Proportion

Ein rem ist, was die Schriftgröße der Wurzel ist, ein in rem geschriebenes Layout behält also seine Form, wenn sich diese Größe ändert. Das ist der ganze Grund, es so zu schreiben. Wenn Sie px in rem umrechnen, ist die Zahl, die Sie erhalten, dieselbe Proportion, die der Pixelwert bei der gewählten Basis hatte, nun in einer Form ausgedrückt, die skaliert.

Sie kann die Einstellungen Ihres Lesers nicht kennen

Die Zahl hängt völlig von der Basis ab. Setzt Ihr CSS am Wurzelelement eine andere Größe oder hat der Leser die Standard-Textgröße in seinem Browser geändert, was viele Menschen tun und tun dürfen, dann sind 1 rem für ihn nicht 16 px. Der Wert auf der Seite stimmt nur für die Basis im Feld. Das ist kein Mangel des Werkzeugs, sondern die Natur der Einheit: Sie ist relativ, und eine relative Einheit hat keinen festen Wert, in den man umrechnen könnte.

Runden

Die Division durch 16 ergibt für viele gängige Größen glatte Ergebnisse (16, 24, 32, 48, 64) und für andere periodische Dezimalbrüche (10 px sind 0,625 rem; 13 px sind 0,8125). Die Seite gibt so viele Stellen an, wie die Zahl braucht, und Sie entscheiden, wie viele Sie im Stylesheet behalten. Browser kommen mit langen Dezimalbrüchen problemlos zurecht, doch ein gerundeter Wert wie 0,8125rem ist leichter zu lesen und zu pflegen als einer mit zehn Stellen.

Gängige Größen

Die Tabelle am Seitenende

Unter dem Umrechner finden Sie eine Tabelle gängiger Größen: 8 px sind 0,5 rem, 10 px sind 0,625, 12 px sind 0,75, 14 px sind 0,875, 16 px sind 1, 18 px sind 1,125, 20 px sind 1,25, 24 px sind 1,5, 32 px sind 2, 48 px sind 3 und 64 px sind 4. Das sind die Größen, die in Schriftskalen und Abstandssystemen am häufigsten vorkommen, und sie vor sich zu haben erspart eine Umrechnung.

Eine auf rem gebaute Skala

Eine nützliche Gewohnheit ist, eine kleine Menge an rem-Werten zu wählen und wiederzuverwenden: 0,5, 1, 1,5, 2, 3 und 4 für Abstände sowie 0,875, 1, 1,25, 1,5, 2 für Schrift. Designer nennen das eine Skala, und sie hält eine Website optisch einheitlich. Gibt Ihnen ein Entwurf einen krummen Wert wie 22 px, sehen Sie mit dem Umrechner, dass es 1,375 rem sind, und entscheiden dann, ob Sie auf den nächsten Wert Ihrer Skala runden.

So rechnen Sie px hier in rem um

Den Pixelwert eingeben

Geben Sie die Größe in Pixeln im ersten Feld ein. Dezimalzahlen werden akzeptiert, 13,5 px funktioniert also ebenso wie 14.

Die Basis prüfen

Lassen Sie sie bei 16, wenn Ihr CSS die Wurzelgröße nicht ändert. Ändern Sie sie, wenn es das tut. Das Ergebnis aktualisiert sich beim Tippen.

Den rem-Wert kopieren

Lesen Sie den Wert ab und verwenden Sie ihn in Ihrem CSS, mit der dahinter geschriebenen Einheit: font-size: 1.5rem. Vergessen Sie die Einheit nicht, denn eine nackte Zahl bedeutet bei den meisten Eigenschaften etwas anderes.

Woher diese Einheiten kommen

Das CSS-Pixel ist nicht das Pixel Ihres Bildschirms

Als Bildschirme keine vorhersehbare Dichte mehr hatten, wurde eine in echten Pixeln bemessene Seite zu einer Seite, die schrumpfte, je schärfer die Bildschirme wurden. Also wurde das CSS-Pixel als Referenzlänge neu definiert: etwa 1/96 Zoll, gesehen aus bequemem Leseabstand. Alles andere auf dieser Seite baut darauf auf. Das em ist älter als das Web: Im Bleisatz war es die Breite eines gegossenen Blocks, benannt nach dem Großbuchstaben M, und in CSS bedeutet es die geltende Schriftgröße, weshalb es sich ändert, wenn man Elemente verschachtelt. Das rem wurde hinzugefügt, um genau dem zu entkommen: Es ist das em des Wurzelelements und schaukelt sich nie auf.

Warum es rem gibt

Vor rem bemaßen Entwickler alles in em oder Prozent, und verschachtelte Elemente multiplizierten einander: Eine Liste in einer Liste in einer Liste schrumpfte oder wuchs mit jeder Ebene. Das rem gab ihnen eine feste Bezugsgröße, die Wurzel, und beseitigte das Aufschaukeln. Wollen Sie die beiden vergleichen, px in em umrechnen und sehen, wie derselbe Pixelwert von dem Element abhängt, in dem er sitzt.

Wo Sie rem in der Praxis begegnen

Schrift

Fließtext hat üblicherweise 1 rem, Überschriften 1,25 bis 3 rem, Kleingedrucktes 0,75 bis 0,875 rem. In rem geschrieben, kann ein Leser die ganze Seite vergrößern, indem er eine einzige Browsereinstellung ändert.

Abstände und Layout

Außenabstände, Innenabstände und Zwischenräume in rem halten den Weißraum proportional zur Schrift. Wächst der Text, wächst auch der Raum um ihn, und das Layout bleibt ausgewogen, statt größere Buchstaben in die alten Kästen zu pressen.

Media Queries

In em oder rem geschriebene Haltepunkte reagieren auf die Textgröße des Lesers, das Layout wechselt also früher in seine schmale Form, wenn jemand seinen Text vergrößert hat. Es ist eine Verfeinerung, die man kennen sollte, auch wenn Pixel bei Haltepunkten gängig bleiben.

Was man in Pixeln lassen sollte

Haarfeine Rahmen, Schatten und dünne Symbole sehen oft bei festen Pixelgrößen am besten aus, denn ein Rahmen von 0.0625rem, der bei großem Text auf 0.1rem wächst, hilft niemandem. Verwenden Sie rem für das, was skalieren soll, und Pixel für das, was nicht skalieren soll.

Fallen beim Umrechnen von px in rem

Vergessen, dass die Basis nicht immer 16 ist

Setzt ein Projekt html { font-size: 62.5% } oder nutzt es eine fließende Wurzelgröße, ist der Faktor ein anderer. Prüfen Sie das Stylesheet, bevor Sie einer Zahl von irgendeinem Umrechner vertrauen, diesen eingeschlossen.

Die Wurzelgröße selbst umrechnen

Setzen Sie die Wurzelgröße in Pixeln, wird die Browsereinstellung des Lesers überschrieben und der Vorteil von rem geht verloren. Setzen Sie die Wurzel als Prozentwert oder lassen Sie sie in Ruhe, damit die Vorgabe des Nutzers respektiert wird.

rem in einer Komponente verwenden, die ihre eigene Schriftgröße setzt

Rem bezieht sich immer auf die Wurzel, nicht auf die Komponente. Eine Schaltfläche mit einer Schriftgröße von 14 px und einem Innenabstand von 1rem hat einen Innenabstand, der dem eigenen Text der Schaltfläche nicht folgt. Wollen Sie Abstände, die dem Text des Elements folgen, ist das die Aufgabe von em.

Einheiten ohne Plan mischen

Ein Stylesheet, das px für einen Außenabstand, rem für den nächsten und em für einen dritten verwendet, ist schwer zu durchdenken. Wählen Sie eine Regel: rem für Schrift und Abstände, Pixel für Rahmen und Schatten, und halten Sie sich daran.

Fragen, die man vor dem Umrechnen stellt

Wie viel rem sind 16 px?

Eins, in einem Standard-Browser. Sechzehn geteilt durch die Basis sechzehn.

Ist rem besser als px?

Für Schrift und Abstände ist es in den meisten Projekten die bessere Wahl, weil es die Einstellungen des Lesers respektiert. Pixel bleiben richtig für Dinge, die nicht skalieren sollen.

Warum weicht mein Ergebnis von einer anderen Seite ab?

Wahrscheinlich eine andere Basis. Prüfen Sie das Feld: Manche Werkzeuge nehmen 10 an, manche 16, manche 14. Diese Seite zeigt die Basis neben dem Ergebnis.

Muss ich runden?

Nein. Browser akzeptieren lange Dezimalbrüche. Runden Sie nur der Lesbarkeit zuliebe.

Wird meine Zahl hochgeladen?

Nein. Die Arithmetik läuft in Ihrem Browser, und nichts wird irgendwohin gesendet.

Wie komme ich zurück?

Mit rem in px umrechnen, das multipliziert, statt zu dividieren.

Klug wählen, wenn Sie px in rem umrechnen

Eine Basis für das Projekt festlegen und dabei bleiben

Was auch immer Sie wählen, machen Sie es zu einer Entscheidung und schreiben Sie sie in die Dokumentation des Projekts. Ein Team, das sich über die Basis uneins ist, erzeugt Komponenten, die nicht zusammenpassen.

In der Entwurfsphase umrechnen, nicht im letzten Moment

Rechnen Sie px in rem um, während Sie den Entwurf lesen, bauen Sie die Skala in das Design ein und bemerken krumme Werte früh. Tun Sie es am Ende, entdecken Sie sie als Haufen uneinheitlicher Zahlen.

Auch die Viewport-Einheiten bedenken

Für Überschriften, die den Bildschirm füllen müssen, drückt px in vw umrechnen eine Größe als Anteil des Viewports aus. Es skaliert anders als rem, und die beiden werden oft kombiniert.

Gewohnheiten, die das Umrechnen von px in rem erleichtern

Eine Umrechnungstabelle im Kopf behalten

Bei einer Basis von 16 decken einige Anker den größten Teil der Arbeit ab: 4 px sind 0,25 rem, 8 px sind 0,5, 12 px sind 0,75, 16 px sind 1, 24 px sind 1,5 und 32 px sind 2. Gibt Ihnen ein Entwurf einen Wert dazwischen, können Sie schätzen, bevor Sie px auf der Seite in rem umrechnen, und den Umrechner nur zur Bestätigung nutzen. Nach einigen Wochen kennen Sie die Tabelle, ohne hinzusehen.

Das Designsystem die Arbeit erledigen lassen

Führt Ihr Team Design-Tokens, etwa spacing-2 oder font-lg, speichern Sie sie einmal in rem und lassen Sie alle auf die Namen verweisen. Dann muss niemand px je wieder in rem umrechnen, und eine Änderung der Skala geschieht an einer einzigen Stelle. Der Umrechner ist das Werkzeug, das Sie benutzen, wenn Sie die Tokens schreiben, nicht, wenn Sie sie verwenden.

Den Pixelwert in einen Kommentar schreiben

Eine Zeile wie padding: 1.25rem; /* 20px */ kostet ein paar Zeichen und erspart dem nächsten Entwickler den Griff zum Taschenrechner. Sie hält auch fest, welche Basis Sie angenommen haben, was hilft, wenn die Wurzelgröße später geändert wird.

Mit einer geänderten Browsereinstellung testen

Der Beweis, dass eine Seite in rem gebaut ist, ist, dass sie eine größere Standard-Textgröße übersteht. Ändern Sie die Einstellung in Ihrem Browser, laden Sie neu und sehen Sie hin. Komponenten, die brechen, sind jene, bei denen etwas in Pixeln geblieben ist oder bei denen eine feste Höhe den Text abgeschnitten hat.

Verwandte Umrechner

Dieselbe Werkzeugfamilie deckt die benachbarten Umrechnungen ab. Um zu Pixeln zurückzukehren, nutzen Sie rem in px umrechnen. Für Größen relativ zum Element gibt es px in em umrechnen und em in px umrechnen, für Größen relativ zum Bildschirm px in vw umrechnen und vw in px umrechnen. Umfasst Ihre Arbeit neben Größen auch Farben, erledigen HEX in RGB umrechnen, RGB in HEX umrechnen und HEX in HSL umrechnen die Schreibweisen des Stylesheets.

Ein durchgerechnetes Beispiel

Angenommen, ein Entwurf gibt einen Kartentitel mit 28 px, einen Karteninnenabstand von 20 px und einen Zwischenraum von 12 px zwischen Karten vor, und Ihr Projekt nutzt die Standardbasis von 16 px. Sie geben 28 ein und lesen 1,75 rem ab, geben 20 ein und lesen 1,25 rem ab, geben 12 ein und lesen 0,75 rem ab. Im Stylesheet schreiben Sie font-size: 1.75rem, padding: 1.25rem und gap: 0.75rem. Ein Besucher, der die Textgröße des Browsers auf 20 px erhöht, sieht dieselbe Karte, um ein Viertel skaliert: Der Titel hat 35 px, der Innenabstand 25 px und der Zwischenraum 15 px, alles in Proportion. Hätten Sie Pixel geschrieben, wäre der Titel bei 28 geblieben, und die Karte hätte falsch ausgesehen.

Eine kurze Checkliste

Vor dem Umrechnen

Finden Sie heraus, welche Basis Ihr CSS verwendet. Entscheiden Sie, welche Größen skalieren sollen und welche nicht.

Beim Umrechnen

Geben Sie den Pixelwert ein, prüfen Sie die neben dem Ergebnis gezeigte Basis und kopieren Sie den rem-Wert mit seiner Einheit.

Nach dem Umrechnen

Testen Sie die Seite mit einer größeren Standard-Textgröße im Browser und achten Sie auf Kästen, die ihren Text nicht mehr fassen.

Häufige Fehler

Annehmen, 1 rem seien immer 16 px

Das sind sie nur, wenn niemand die Wurzelgröße geändert hat, und manche Leser haben das. Schreiben Sie das Layout so, dass es auch bei anderen Größen funktioniert.

Die Wurzelgröße in Pixeln setzen

Sie überschreibt die Wahl des Lesers. Verwenden Sie einen Prozentwert oder setzen Sie sie gar nicht.

Alles umrechnen

Nicht jede Größe soll skalieren. Lassen Sie Rahmen und Schatten in Pixeln.

Ihre Zahlen bleiben auf Ihrem Gerät

Die Berechnung findet lokal statt. Ihre Werte werden von Ihrem eigenen Browser verwendet, und nichts wird irgendwohin gesendet. Danach gibt es nichts zu löschen und kein Konto anzulegen. Das ist der schlichte Weg, px in rem umzurechnen.

Zusammenfassung

Um px hier in rem umzurechnen, geben Sie die Größe in Pixeln ein und lesen sie sofort in rem ab, nach der Formel rem = px ÷ Basis. Die Basis beginnt bei 16 px, dem Standard eines Browsers, und Sie können sie an Ihr CSS anpassen. Die Umrechnung behält die Proportion: Ein in rem geschriebenes Layout behält seine Form, wenn sich die Schriftgröße der Wurzel ändert. Die Einstellungen Ihres Lesers kann sie nicht kennen, der Wert stimmt also nur für die Basis im Feld. Die gängigen Größen in der Tabelle unter dem Umrechner, von 8 px bei 0,5 rem bis 64 px bei 4 rem, ersparen Ihnen, die Arithmetik zu wiederholen. Nichts wird hochgeladen.