PX-zu-REM-Konverter
Rechne Pixel, rem und em sofort um und nutze eine praktische CSS-Referenztabelle.
Referenztabelle
1px = 0.0625rem 2px = 0.125rem 3px = 0.1875rem 4px = 0.25rem 5px = 0.3125rem 6px = 0.375rem 7px = 0.4375rem 8px = 0.5rem 9px = 0.5625rem 10px = 0.625rem 11px = 0.6875rem 12px = 0.75rem 13px = 0.8125rem 14px = 0.875rem 15px = 0.9375rem 16px = 1rem 17px = 1.0625rem 18px = 1.125rem 19px = 1.1875rem 20px = 1.25rem 21px = 1.3125rem 22px = 1.375rem 23px = 1.4375rem 24px = 1.5rem 25px = 1.5625rem 26px = 1.625rem 27px = 1.6875rem 28px = 1.75rem 29px = 1.8125rem 30px = 1.875rem 31px = 1.9375rem 32px = 2rem 33px = 2.0625rem 34px = 2.125rem 35px = 2.1875rem 36px = 2.25rem 37px = 2.3125rem 38px = 2.375rem 39px = 2.4375rem 40px = 2.5rem 41px = 2.5625rem 42px = 2.625rem 43px = 2.6875rem 44px = 2.75rem 45px = 2.8125rem 46px = 2.875rem 47px = 2.9375rem 48px = 3rem 49px = 3.0625rem 50px = 3.125rem 51px = 3.1875rem 52px = 3.25rem 53px = 3.3125rem 54px = 3.375rem 55px = 3.4375rem 56px = 3.5rem 57px = 3.5625rem 58px = 3.625rem 59px = 3.6875rem 60px = 3.75rem 61px = 3.8125rem 62px = 3.875rem 63px = 3.9375rem 64px = 4rem
So funktioniert es
- Gib einen Wert ein und wähle die Einheit.
- Lege die Basis-Schriftgröße deines Projekts fest.
- Verwende das Ergebnis oder kopiere die Tabelle.
Über dieses Werkzeug
Pixel sind praktisch zum Messen eines Entwurfs, während rem und em ein anpassungsfähigeres CSS-System ermöglichen. Dieser Rechner übersetzt Werte in beide Richtungen. REM bezieht sich auf die Schriftgröße des Dokumentstamms: Bei einer Basis von 16 Pixeln entspricht 1rem genau 16px, 24px entsprechen also 1,5rem. EM nutzt hier dieselbe Rechnung, kann im Browser aber vom übergeordneten Element erben und hängt dadurch vom Kontext ab. Passe die Basis an, wenn dein Projekt eine andere Root-Größe nutzt oder Nutzer die Schrift vergrößern können. Die Tabelle von 1 bis 64 Pixeln bietet eine schnelle Referenz für typische Design-Systeme. Vier Nachkommastellen halten die Werte präzise, ohne CSS unnötig unleserlich zu machen. Bei der Rückrechnung von rem wird immer die gewählte Basis verwendet; verlasse dich nicht automatisch auf 16px. Rem eignet sich oft für Abstände und Typografie, die mit der Root-Skalierung wachsen sollen. Em ist nützlich für Beziehungen innerhalb einer Komponente. Alle Berechnungen finden lokal im Browser statt, sodass keine Projektdateien hochgeladen werden. Bei responsiven Layouts lohnt es sich, die Basis mit den tatsächlichen Root-Regeln zu vergleichen. So bleibt die Tabelle eine verlässliche Referenz und nicht nur eine theoretische Umrechnung außerhalb des Stylesheets. Definiere die Basis als CSS-Variable, wenn mehrere Komponenten denselben Maßstab verwenden. So bleibt die Tabelle mit dem tatsächlichen Root-Wert synchron, auch wenn Nutzer die Schriftgröße anpassen. Prüfe bei verschachtelten Elementen zusätzlich den geerbten em-Kontext.
Häufige Fragen
Ähnliche Werkzeuge
Seitenverhältnis-Rechner
Passende Bild- und Videodimensionen für 16:9, 4:3, Quadrat, Hochformat, Kino und eigene Verhältnisse berechnen.
Open-Graph-Previewer
Twitter-, Discord-, Telegram- und LinkedIn-Karten prüfen und ein Open-Graph-Meta-Tag-Snippet erzeugen.
Platzhalter-Generator
Erstelle SVG-Platzhalter und Data-URIs mit eigenen Maßen, Farben, Beschriftungen und Schriftgrößen.