rem in px umrechnen Root em ↔ Pixels Kostenlos Online Sicher
Geben Sie einen Wert in rem ein und lesen Sie ihn sofort in px ab. Gerechnet wird in Ihrem Browser, nichts wird irgendwohin geschickt, und wovon das Ergebnis abhängt, steht unten, statt vorausgesetzt zu werden.
Kein Upload
Übliche Größen — rem in px umrechnen
| rem | px |
|---|---|
| 0.5 | 8 |
| 0.75 | 12 |
| 1 | 16 |
| 1.25 | 20 |
| 1.5 | 24 |
| 2 | 32 |
| 2.5 | 40 |
| 3 | 48 |
| 4 | 64 |
Woher diese Einheiten kommen
Das Pixel in CSS ist nicht das Pixel Ihres Bildschirms. Als Anzeigen keine vorhersagbare Dichte mehr hatten, wurde eine in echten Pixeln bemessene Seite zu einer Seite, die schrumpfte, je schärfer die Schirme wurden; also bestimmte man das CSS-Pixel neu als Bezugslänge: etwa 1/96 Zoll, aus bequemem Leseabstand gesehen. 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ßen M — und bedeutet in CSS die geltende Schriftgröße, weshalb es sich beim Verschachteln ändert. Das Rem wurde eingeführt, um genau dem zu entkommen: es ist das Em des Wurzelelements und summiert sich nie. Das Vw kam mit dem responsiven Entwurf: ein Hundertstel der Fensterbreite, wie groß die auch ausfällt.
Wo sie Ihnen begegnen
Dies sind die Einheiten jedes Stylesheets. Pixel bemessen Rahmen, Schatten und alles, was nicht skalieren soll; Rem bemisst Schrift, Abstände und Layout, sodass eine einzige Änderung an der Wurzel eine ganze Oberfläche umskaliert; Em bemisst, was dem eigenen Text folgen soll, etwa die Polsterung in einer Schaltfläche; Vw bemisst Überschriften und Kopfbereiche, die auf jedem Gerät den Schirm füllen müssen. Zwischen ihnen umzurechnen ist die tägliche Rechenarbeit, aus einem in Pixeln übergebenen Entwurf ein Stylesheet zu machen, das mitwächst.
Häufige Fragen
Warum sind 16 px der übliche Ausgangspunkt?
Weil das in jedem großen Browser die voreingestellte Textgröße ist und ein Stylesheet, das sie nicht überschreibt, sie erbt. Ein Rem entspricht daher bei Voreinstellung 16 px — daher die vertrauten Umrechnungen: 0,5 rem sind 8 px, 1,5 rem sind 24 px. Hat ein Benutzer die Voreinstellung in seinem Browser vergrößert, wachsen dieselben Rem-Werte mit, und genau darum benutzt man sie.
Soll ich rem oder em nehmen?
Rem für alles, was der Seite als Ganzem folgen soll — Schriftstufen, Abstände, Layoutbreiten —, denn es wird von der Wurzel aus gemessen und häuft sich nie. Em für alles, was dem Text folgen soll, in dem es sitzt: die Polsterung einer Schaltfläche, der Abstand neben einem Symbol, der Einzug eines Zitats. Der verbreitete Fehler ist, em-bemessene Elemente ineinander zu schachteln: 1,2 em in 1,2 em wird 1,44, dann 1,73, bis der Text am Seitenende doppelt so groß ist wie gedacht.
Ist das Ergebnis exakt?
Wo beide Einheiten durch ganze Zahlen voneinander abgeleitet sind, ja — die Seite sagt es über der Zahl, und gerundet wird nur bei der Anzahl der angezeigten Stellen. Wo das Verhältnis keine endliche Dezimalzahl hat, zeigt die Seite zwölf signifikante Stellen und nennt die Beziehung näherungsweise, statt etwas anderes vorzugeben.
Verlässt etwas, das ich eingebe, mein Gerät?
Nein. Die Rechnung läuft in Ihrem Browser; nichts wird hochgeladen, und es gibt auch keinen Server dafür. Einmal geladen, funktioniert die Seite auch ohne Netz.
Warum Sie rem in px umrechnen müssen
Sie öffnen ein Stylesheet und sehen padding: 2.25rem an einer Karte und font-size: 0.8125rem an einer Bildunterschrift. Das sind gute Werte, so geschrieben, wie modernes CSS geschrieben werden sollte, und sie sagen auf einen Blick nichts. Wie groß ist dieser Karten-Innenabstand auf dem Bildschirm? Ist die Bildunterschrift lesbar? Passt sie zu den 36 px und 13 px in der Designdatei, die man Ihnen gegeben hat? Um das zu beantworten, rechnen Sie rem in px um: Sie multiplizieren mit der Wurzel-Schriftgröße und lesen die Antwort in der Einheit ab, die die Design-Werkzeuge verwenden. Es ist die Umkehrung der üblichen Richtung, und Sie tun es, wenn Sie Code lesen, einen Entwurf mit einem Build vergleichen oder jemandem, der in Pixeln denkt, ein Layout erklären.
Die Umrechnung ist leicht; was sie eine Seite wert macht, ist die Basis. Ein rem ist keine Größe, es ist ein Vielfaches einer Größe, der Schriftgröße des Wurzelelements. In einem Browser, dem niemand etwas anderes gesagt hat, beträgt diese Größe 16 px, also sind 1 rem 16 px, 2,25 rem 36 px und 0,8125 rem 13 px. Doch die Wurzel kann vom Stylesheet geändert werden, und der Leser kann sie im Browser ändern, und dann bewegt sich jeder rem-Wert der Seite mit. Die Seite fragt deshalb nach der Basis und verwendet sie, statt sie zu verbergen.
Die Berechnung geschieht in Ihrem Browser, und nichts wird hochgeladen. Weiter unten finden Sie die Formel, eine Tabelle gängiger Werte, was die Umrechnung behält und nicht behalten kann, die Situationen, in denen Entwickler rem in px umrechnen müssen, und einige Gewohnheiten, die ein auf rem basierendes Stylesheet gut lesbar halten.
Die Formel und die Basis
px ist gleich rem mal der Basis
Die Formel ist eine Multiplikation: px = rem × Basis. Bei der üblichen Basis von 16 px werden 1,5 rem zu 24 px, 0,75 rem zu 12 px und 4 rem zu 64 px. Die Seite druckt die Basis neben das Ergebnis, eine Zeile wie 1,5 rem = 24 px (16 px) sagt also, was sie angenommen hat, und Sie sehen sofort, ob es zu Ihrem Projekt passt.
Ihre Basis herausfinden
Suchen Sie im Stylesheet nach einer Regel für html oder :root, die font-size setzt. Gibt es keine, ist die Basis der Browser-Standard von 16 px. Gibt es eine, etwa 62.5%, nehmen Sie diesen Prozentsatz von 16: 62,5 % ergeben 10 px. In den Entwicklerwerkzeugen des Browsers können Sie auch das Wurzelelement auswählen und seine berechnete Schriftgröße ablesen, das ist die Zahl, die Sie ins Basisfeld eingeben.
Wenn die Wurzelgröße fließend ist
Manche Websites lassen die Wurzelgröße mit dem Fenster wachsen, mit einem clamp-Ausdruck. Dann hat 1 rem überhaupt keinen einzelnen Pixelwert: Es sind 15 px auf einem Telefon und 18 px auf einem breiten Monitor. In diesem Fall ist jede Umrechnung eine Momentaufnahme. Geben Sie die Basis ein, die Sie bei der Breite sehen, die Sie interessiert, und verstehen Sie, dass die Antwort nur bei dieser Breite gilt.
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. Wenn Sie rem in px umrechnen, ist der Pixelwert dieselbe Proportion, für eine bestimmte Basis konkret gemacht. Das Verhältnis zweier Größen, etwa einer Überschrift von 2 rem zu Fließtext von 1 rem, ändert sich nicht, wie Sie auch umrechnen, und dieses Verhältnis ist es, wovon ein gutes Layout abhängt.
Sie kann die Einstellungen Ihres Lesers nicht kennen
Die Zahl hängt völlig von der Basis ab. Hat der Leser die Standard-Textgröße seines Browsers erhöht, was viele Menschen tun und tun dürfen, sind 1 rem für ihn nicht 16 px, und der Wert, den Sie sehen, stimmt nur für die Basis im Feld. Behandeln Sie den Pixelwert als Mittel, das Design zu verstehen, und nicht als Versprechen dessen, was jeder Besucher sehen wird.
Runden
Da die Basis meist eine ganze Zahl ist, ist das Ergebnis der Multiplikation meist exakt. 0,8125 rem sind bei einer Basis von 16 genau 13 px; 0,6875 rem sind genau 11 px. Erhalten Sie einen langen Dezimalbruch, ist das ein Zeichen dafür, dass der rem-Wert aus einer anderen Basis berechnet wurde als der, die Sie eingegeben haben.
Gängige Werte
Die Tabelle am Seitenende
Die Seite enthält eine Tabelle der Pixelwerte, denen gängige rem-Werte bei der eingestellten Basis entsprechen: 0,5 rem sind 8 px, 0,625 sind 10, 0,75 sind 12, 0,875 sind 14, 1 sind 16, 1,125 sind 18, 1,25 sind 20, 1,5 sind 24, 2 sind 32, 3 sind 48 und 4 sind 64. Das sind die Werte, die in Abstands- und Schriftskalen am häufigsten vorkommen, und sie auswendig zu kennen macht ein Stylesheet auf einen Blick lesbar.
Ein Stylesheet in Pixeln lesen
Eine nützliche Übung ist, ein Stylesheet, das Sie nicht geschrieben haben, zu nehmen, seine wichtigsten Werte einmal in Pixel zu übersetzen und die Ergebnisse in einer Notiz festzuhalten. Eine Fließtextgröße von 1 rem, Überschriften von 1,5 und 2,25 rem, ein Container-Zwischenraum von 2 rem: in Pixeln 16, 24, 36 und 32. So gesehen zeigt sich die Logik des Designs, und Sie können es ohne Taschenrechner mit der Designdatei vergleichen.
So rechnen Sie rem hier in px um
Den rem-Wert eingeben
Geben Sie die Größe in rem im ersten Feld ein. Dezimalzahlen werden akzeptiert, 0,8125 funktioniert also ebenso wie 1.
Die Basis festlegen
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 Pixelwert ablesen
Die Antwort erscheint sofort, mit der Basis daneben, damit Sie erkennen, was angenommen wurde. Kopieren Sie sie in Ihre Notizen oder vergleichen Sie sie mit der Designdatei.
Woher diese Einheiten kommen
Das CSS-Pixel
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. Ein Pixel in einem Stylesheet ist daher kein Punkt auf Ihrem Bildschirm, sondern eine Längeneinheit, die der Browser auf so viele Punkte abbildet, wie der Bildschirm braucht.
Das rem
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. Um den Unterschied in Zahlen zu sehen, rechnen Sie px in em um und vergleichen Sie es mit dem, was Sie erhalten, wenn Sie rem in px umrechnen.
Wann Entwickler rem in px umrechnen
Einen Build gegen eine Designdatei prüfen
Eine Designerin übergibt eine Datei in Pixeln; der Entwickler hat den Code in rem geschrieben. Um zu prüfen, ob die Seite passt, rechnet er rem in px um und vergleicht Zahlen. Eine Abweichung fällt sofort auf: 1,375 rem sind 22 px, und sagt das Design 24, ist eines von beiden falsch.
Fremden Code lesen
Erben Sie ein Stylesheet, verbergen rem-Werte die wahren Größen. Einige der wichtigsten umzurechnen gibt Ihnen eine Karte des Designs: wie groß die Schrift ist, wie breit die Zwischenräume sind, wo die Haltepunkte liegen.
Fehlerberichte und Dokumentation schreiben
Wer eine Seite testet, beschreibt, was er sieht, in Pixeln. Ein Entwickler, der sagt, der Innenabstand betrage 2,5 rem, sagt einer Testerin wenig; 40 px sagt etwas. Das Umrechnen lässt beide Seiten einander verstehen.
Werte festlegen, die in Pixeln exakt sein müssen
Manches muss eine exakte Zahl von Geräte-Pixeln sein, sonst wirkt es unscharf: ein Rahmen von einem Pixel, ein auf einem 24-px-Raster gezeichnetes Symbol. Muss eine Größe auf dem Pixelraster landen, sagt Ihnen das Umrechnen von rem in px, ob sie es bei Ihrer Basis tut.
Fallen beim Umrechnen von rem in px
Eine geänderte Wurzelgröße vergessen
Ist die Wurzel auf 62.5% oder auf einen clamp-Ausdruck gesetzt, gilt der Standardfaktor 16 nicht. Das Ergebnis ist um das Verhältnis der beiden Basen falsch. Prüfen Sie immer zuerst die Basis.
rem mit em verwechseln
Em ist relativ zur eigenen Schriftgröße des Elements, nicht zur Wurzel. Ein Wert von 1.5em in einer Überschrift von 24 px sind 36 px, in einem Absatz von 16 px aber 24 px. Diese Seite rechnet rem um, das keine solche Mehrdeutigkeit hat. Für em siehe em in px umrechnen.
Annehmen, der Bildschirm zeige dieselben Pixel
Ein CSS-Pixel ist kein Geräte-Pixel. Auf einem Display hoher Dichte kann ein CSS-Pixel zwei oder drei Geräte-Pixel sein. Die Umrechnung liefert CSS-Pixel, was die Design-Werkzeuge und das Stylesheet beide verwenden.
Zu früh runden
Runden Sie 13,333 px auf 13 und rechnen dann zurück, erhalten Sie 0,8125 rem und nicht die 0,8333, mit denen Sie begonnen haben. Behalten Sie den ursprünglichen rem-Wert, wenn es darauf ankommt.
Fragen, die man vor dem Umrechnen stellt
Wie viele Pixel sind 1 rem?
Sechzehn, in einem Browser, dessen Standard nicht geändert wurde.
Wie viele Pixel sind 2 rem?
Zweiunddreißig bei der Standardbasis. Bei einer Basis von 10 wären es 20.
Warum zeigt mein Browser etwas anderes?
Die Einstellung des Lesers oder eine Regel im Stylesheet hat die Wurzelgröße geändert. Sehen Sie sich in den Entwicklerwerkzeugen die berechnete Schriftgröße des Wurzelelements an.
Ist rem dasselbe wie em?
Nein. Rem bezieht sich auf das Wurzelelement, em auf das Element selbst.
Wird meine Zahl hochgeladen?
Nein. Die Arithmetik läuft in Ihrem Browser, und nichts wird irgendwohin gesendet.
Wie komme ich zurück?
Mit px in rem umrechnen, das dividiert, statt zu multiplizieren.
Gewohnheiten, die ein rem-Stylesheet gut lesbar machen
Den Pixelwert in einen Kommentar schreiben
Eine Zeile wie gap: 1.5rem; /* 24px */ kostet ein paar Zeichen und erspart dem nächsten Leser eine Umrechnung. Sie hält auch fest, welche Basis Sie angenommen haben.
Eine kleine Skala verwenden
Ein Projekt, das nur eine Handvoll rem-Werte nutzt, etwa 0,5, 1, 1,5, 2 und 3, ist leicht zu lernen: Nach einem Tag kennen Sie sie in Pixeln, ohne nachzudenken. Wenn Sie für ein solches Stylesheet rem in px umrechnen, bestätigen Sie nur, woran Sie sich erinnern.
Ihre Werte benennen
Mit benutzerdefinierten Eigenschaften wie --space-md: 1.5rem beschreibt das Stylesheet Absicht statt Zahlen. Der Name trägt die Bedeutung, und die Zahl steht an einer einzigen Stelle.
Mit einer anderen Standardgröße testen
Erhöhen Sie die Standard-Textgröße in Ihrem Browser und sehen Sie sich die Seite an. Hält sie zusammen, ist das Layout wirklich in rem gebaut. Bricht sie, ist etwas in Pixeln geblieben.
Den Pixelwert gut nutzen, nachdem Sie rem in px umgerechnet haben
Verhältnisse vergleichen, nicht nur Zahlen
Wenn Sie rem für ein ganzes Stylesheet in px umrechnen, achten Sie neben den Größen selbst auf die Verhältnisse zwischen ihnen. Eine Schriftskala, in der jede Stufe etwa das 1,25-Fache der vorigen ist, ergibt 16, 20, 25, 31 und 39 Pixel; eine Skala von 1,5 ergibt 16, 24, 36 und 54. Das Verhältnis zu erkennen sagt Ihnen, was die Designerin beabsichtigt hat, und lässt Sie die Skala stimmig erweitern, wenn Sie eine neue Größe brauchen.
Für Menschen übersetzen, die in Pixeln denken
Nicht jeder in einem Team liest rem. Projektleiter, Texter und Kunden arbeiten oft nach Screenshots und bitten darum, eine Überschrift etwas größer zu machen. Können Sie sagen, dass die Überschrift jetzt 36 px hat und bei 2,5 rem 40 px hätte, ist das Gespräch kurz. Die Seite ist als schnelle Brücke zwischen den beiden Vokabularen nützlich.
Touch-Ziele und Mindestgrößen prüfen
Richtlinien für Touchscreens verlangen Ziele von mindestens etwa 44 px, und Richtlinien für Text verlangen Fließtext von etwa 16 px oder mehr. Beides ist in Pixeln angegeben. Um ein in rem geschriebenes Stylesheet daran zu prüfen, rechnen Sie rem in px um und sehen, ob die Schaltflächen und der Text die Linie überschreiten.
Den gezoomten Fall bedenken
Der Wert, den Sie erhalten, gilt für die Basis, die Sie eingegeben haben. Könnten Ihre Leser den Text vergrößern, versuchen Sie die Umrechnung noch einmal mit einer Basis von 20 oder 24 und sehen Sie, was das Layout dem Bildschirm abverlangt. Eine Karte, die bei 16 bequem ist, kann bei 24 überlaufen, und der beste Zeitpunkt, das herauszufinden, ist vor der Veröffentlichung der Seite.
Verwandte Umrechner
Dieselbe Werkzeugfamilie deckt die benachbarten Umrechnungen ab. Um zu rem zurückzukehren, nutzen Sie px in rem 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. Für die Farben im selben Stylesheet stehen HEX in RGB umrechnen und HSL in HEX umrechnen bereit, und für Klassennamen macht Text in kebab-case umwandeln aus einer Wendung einen Namen, den CSS akzeptiert.
Ein durchgerechnetes Beispiel
Angenommen, Sie prüfen einen Pull-Request, und das Stylesheet hat einen Hero-Abschnitt mit padding: 5rem 1.5rem, einem Titel von 3.5rem und einem Einleitungsabsatz von 1.25rem. Die Designdatei sagt 80 px und 24 px Innenabstand, einen Titel mit 56 px und eine Einleitung mit 20 px. Sie geben 5 ein und lesen 80 px ab, geben 1,5 ein und lesen 24 ab, geben 3,5 ein und lesen 56 ab, geben 1,25 ein und lesen 20 ab. Alle vier stimmen, der Build ist also getreu. Wäre der Titel 3,25 rem gewesen, hätten Sie 52 abgelesen und den Unterschied bemerkt, bevor er die Designerin erreicht.
Eine kurze Checkliste
Vor dem Umrechnen
Finden Sie die Basis: die Wurzelregel im Stylesheet oder die berechnete Größe in den Entwicklerwerkzeugen.
Beim Umrechnen
Geben Sie den rem-Wert ein, prüfen Sie die neben dem Ergebnis gezeigte Basis und notieren Sie den Pixelwert.
Nach dem Umrechnen
Vergleichen Sie mit der Designdatei. Weichen die Zahlen ab, prüfen Sie die Basis, bevor Sie den Code verdächtigen.
Häufige Fehler
16 ungeprüft verwenden
Es ist der Standard, keine Regel. Prüfen Sie die Wurzel.
Die Pixel als endgültig behandeln
Die Antwort gilt für eine Basis. Ein Leser mit größerem Standard sieht größere Pixel.
rem und em durcheinanderbringen
Sie sehen ähnlich aus und verhalten sich verschieden. Nutzen Sie für jedes die richtige Seite.
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, rem in px umzurechnen.
Zusammenfassung
Um rem hier in px umzurechnen, geben Sie die Größe in rem ein und lesen sie sofort in Pixeln ab, nach der Formel px = rem × 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, da ein rem ist, was die Schriftgröße der Wurzel ist, und sie kann die Einstellungen Ihres Lesers nicht kennen, der Wert stimmt also nur für die Basis im Feld. Die Tabelle gängiger Werte, von 0,5 rem bei 8 px bis 4 rem bei 64 px, hilft Ihnen, ein Stylesheet auf einen Blick zu lesen. Nichts wird hochgeladen.