PX-in-REM-Rechner + komplette Tabelle von 1 bis 128px | We.Inc
Rechne px in rem und rem in px mit jeder Root-Schriftgröße um. Komplette Tabelle von 1 bis 128px mit Tailwind-Klassen, ein Konverter für CSS-Blöcke und ein Helfer für fluides clamp().
PX-in-REM-Rechner
Um Pixel in rem umzurechnen, teilst du den Pixelwert durch die Root-Schriftgröße. Beim Browser-Standard von 16px sind 24px gleich 1.5rem und 12px gleich 0.75rem. Gib einen Wert in eines der Felder ein, um in beide Richtungen umzurechnen, ändere die Root-Größe, wenn deine Website eine andere Basis nutzt, oder füge ganze CSS-Regeln ein.
Gängige Größen bei der Standard-Root von 16px
Pixel
Typische Verwendung
Bildunterschriften, kleine Labels
Sekundärtext, Buttons
Fließtext
Großer Fließtext, kleine Überschriften
Abschnittsüberschriften, Padding von Karten
Seitenüberschriften, Abstände zwischen Abschnitten
Hero-Überschriften
Ein Rechner für beide Richtungen mit eigener Root-Größe, eine komplette Tabelle von 1 bis 128 Pixel mit der passenden Tailwind-Klasse, ein Konverter für ganze CSS-Blöcke und ein Helfer, der fluide clamp()-Größen schreibt.
Lege die Root-Schriftgröße fest. Lass sie bei 16, außer dein Stylesheet setzt eine andere Größe auf dem html-Element.
Tippe in das Pixel-Feld, um rem zu erhalten, oder in das rem-Feld, um Pixel zu erhalten. Beide aktualisieren sich während der Eingabe.
Scrolle durch die Tabelle, um jede Größe von 1 bis 128 Pixel zu finden. Klicke auf eine Zeile, um ihren rem-Wert zu kopieren.
Füge CSS in den Block-Konverter ein, um alle px-Werte auf einmal in rem umzuwandeln. Null wird zu 0, und Rahmen mit 1px bleiben in Pixeln, außer du entfernst den Haken bei dieser Option.
Nutze den clamp()-Helfer, um eine Schriftgröße zu erhalten, die zwischen Smartphone- und Desktop-Breite gleichmäßig wächst.
Lass die Schriftgröße von html bei 100% (dem Browser-Standard), statt sie auf 62.5% zu setzen. Der 62.5%-Trick macht 1rem gleich 10px, verkleinert aber jede Fremdkomponente, die von 16px ausgeht.
Verwende rem für Schriftgrößen und die meisten Abstände, damit das gesamte Layout skaliert, wenn jemand die Standard-Textgröße im Browser erhöht.
Lass haarfeine Rahmen und Versätze von box-shadow in px. Ein Rahmen von 1px, der zu 0.0625rem wird, kann bei manchen Zoomstufen unscharf dargestellt werden oder verschwinden.
Media Queries in em oder rem folgen ebenfalls der Schrifteinstellung des Nutzers. Die meisten Browser behandeln 1em in einer Media Query als Standardgröße des Browsers, nicht als deine html-Regel.
Häufige Fragen
Wie viele Pixel sind 1rem?
1rem entspricht der Schriftgröße des Root-Elements html. Browser setzen sie standardmäßig auf 16px, also ist 1rem gleich 16px, solange die Website oder der Besucher das nicht ändert. Stellt ein Besucher seine Standard-Textgröße auf 20px, wird 1rem auf jeder Website zu 20px, die die Root-Größe nicht in Pixeln festgelegt hat.
Was ist der Unterschied zwischen rem und em?
rem bezieht sich immer auf die Schriftgröße des Root-Elements html. em bezieht sich auf die Schriftgröße des Elements selbst (oder seines Elternelements, wenn es bei font-size verwendet wird). Verschachtelte em-Größen multiplizieren sich: Eine Liste mit 1.2em in einer Liste mit 1.2em landet beim 1.44-Fachen der Basis. rem summiert sich nie auf, deshalb nutzen es die meisten Design-Systeme.
Sollte ich px oder rem für Schriftgrößen verwenden?
Verwende rem. Text in px ignoriert die Einstellung der Standard-Schriftgröße im Browser, die manche Menschen erhöhen, um bequem lesen zu können. Der Seitenzoom funktioniert mit px zwar weiterhin, die Einstellung der Schriftgröße aber nicht. rem ist daher die barrierefreiere Wahl.
Wie lassen sich Tailwind-Klassen auf rem abbilden?
In der Standard-Abstandsskala von Tailwind ist jeder Schritt 0.25rem, also 4px bei einer Root von 16px. p-4 ist also 1rem (16px) und gap-6 ist 1.5rem (24px). Schriftgrößen verwenden stattdessen Namen: text-sm ist 0.875rem und text-base ist 1rem. Die Tabelle auf dieser Seite listet die Klasse für jede Größe, die auf der Standardskala liegt.
Sendet dieses Tool mein CSS irgendwohin?
Nein. Jede Umrechnung läuft in deinem Browser, und nichts, was du eintippst oder einfügst, wird hochgeladen.
Warum es rem gibt
Pixel sind in CSS feste Einheiten. Eine Überschrift mit 32px bleibt 32px, auch wenn ein Besucher seinem Browser gesagt hat, größeren Text zu verwenden. Die Einheit rem löst das, indem sie Größen an die Root-Schriftgröße koppelt, die standardmäßig der Einstellung des Besuchers folgt. Ändere eine Zahl, und jede auf rem basierende Größe der Seite skaliert mit.
Damit eignet sich rem gut für Schrift, Padding, Margins und die Breite von Textspalten. Pixel sind weiterhin sinnvoll für Dinge, die nicht mit dem Text skalieren sollen, etwa eine Trennlinie mit 1px oder die Größe eines Bildes mit festen Pixelmaßen.
rem und em im Vergleich
Das Live-Beispiel auf dieser Seite setzt dieselbe Größe 1.25 drei Ebenen tief, einmal in em und einmal in rem. Die em-Version wächst auf jeder Ebene, weil jedes Kindelement die Größe seines Elternelements multipliziert. Die rem-Version bleibt auf jeder Tiefe gleich, weil sie sich immer auf die Root bezieht.
em ist weiterhin nützlich, wenn etwas mit seinem eigenen Text skalieren soll, etwa das Padding in einem Button oder der Abstand nach einem Icon. Setze die Schriftgröße des Buttons in rem und sein Padding in em, dann ändert sich mit der Schriftgröße der ganze Button.
Fluide Größen mit clamp()
clamp(min, preferred, max) wählt den bevorzugten Wert, geht aber nie unter das Minimum oder über das Maximum. Mit einer Mischung aus rem und vw als bevorzugtem Wert wächst eine Überschrift gleichmäßig mit der Fensterbreite und respektiert trotzdem die Schriftgröße des Nutzers.
Der Helfer berechnet die Gerade zwischen zwei Punkten, zum Beispiel 32px auf einem 375px breiten Smartphone und 56px auf einem Desktop mit 1280px, und schreibt sie als Ausdruck aus rem plus vw. Teste das Ergebnis bei einigen Breiten, denn sehr steile vw-Werte können Text schneller wachsen lassen als seine Zeilenlänge.
Umrechnen
Root-Schriftgröße (px)
Pixel
(Root {n}px)
rem kopieren
px kopieren
Root {n}px
CSS-Block umrechnen
CSS mit px
Dasselbe CSS in rem
Werte mit 1px in px belassen
Umgerechnetes CSS kopieren
Fluide Größe mit clamp()
Kleinste Größe (px)
Größte Größe (px)
Ab Breite (px)
Bis Breite (px)
Gib Größen über null und eine Bis-Breite ein, die größer ist als die Ab-Breite.
clamp() kopieren
Ändere die Fenstergröße, um diese Zeile wachsen zu sehen.
em summiert sich auf, rem nicht
Jede Ebene unten setzt font-size: 1.25 in ihrer Einheit, drei Ebenen tief verschachtelt.
Ebene {n}
Komplette Tabelle px in rem
Root {n}px. Klicke auf eine Zeile, um ihren rem-Wert zu kopieren.
Tailwind-Klassen werden nur bei einer Root von 16px angezeigt, der Größe, auf der ihre Skala aufbaut.
{v} kopiert.
px in rem bei einer Root von {n}px, 1 bis 128 Pixel, mit Tailwind-Klassen