nicetool.dev logo

PX-in-REM-Rechner

Tippe in eines der Felder. Klicke eine Tabellenzeile, um sie zu übernehmen, oder füge unten CSS ein.

24px = 1.5rem = 18pt = 150%

Umrechnungstabelle (Basis 16px)

pxrempt
1px0.0625rem0.75pt
2px0.125rem1.5pt
4px0.25rem3pt
6px0.375rem4.5pt
8px0.5rem6pt
10px0.625rem7.5pt
12px0.75rem9pt
14px0.875rem10.5pt
16px1rem12pt
18px1.125rem13.5pt
20px1.25rem15pt
24px1.5rem18pt
28px1.75rem21pt
32px2rem24pt
36px2.25rem27pt
40px2.5rem30pt
48px3rem36pt
56px3.5rem42pt
64px4rem48pt
72px4.5rem54pt
80px5rem60pt
96px6rem72pt
128px8rem96pt

CSS-Schnipsel umwandeln

6 Werte umgewandelt
.card {
  padding: 1.5rem 2rem;
  margin-bottom: 1rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
}

Was ist der Unterschied zwischen px und rem?

px ist eine feste CSS-Einheit, 1rem entspricht dagegen der Schriftgröße des html-Elements, standardmäßig 16px in jedem Browser. Wer Schrift, Abstände und Layout in rem angibt, sorgt dafür, dass alles mitwächst, wenn Nutzer die Standardschriftgröße im Browser erhöhen, eine wichtige Anforderung der Barrierefreiheit (WCAG 1.4.4, Textgröße ändern). Die Rechnung ist einfach: rem = px / Root-Schriftgröße, 24px sind bei 16px Basis also 1,5rem. em funktioniert genauso, bezieht sich aber auf die Schriftgröße des Elternelements und summiert sich bei Verschachtelung.

Funktionen

  • • px- und rem-Umrechnung in beide Richtungen mit eigener Root-Schriftgröße
  • • Zeigt auch pt- und Prozentwerte
  • • Klickbare Tabelle gängiger Größen von 1px bis 128px
  • • Massenumwandlung aller px-Werte in einem CSS-Schnipsel
  • • Option, 1px-Haarlinien in px zu lassen

Läuft lokal

Alle Umrechnungen passieren im Browser, auch das eingefügte CSS. Nichts wird hochgeladen.

Sofortige Rechnung, 100 % clientseitig.

So verwenden Sie: PX in REM

  1. 1

    Prüfe die Root-Schriftgröße: Lass 16px stehen, außer dein Projekt setzt html { font-size } anders, etwa auf 10px oder 62,5 %.

  2. 2

    Gib einen Wert ins px-Feld ein, um rem zu erhalten, oder ins rem-Feld für px. Die Zeile darunter zeigt auch pt und Prozent.

  3. 3

    Klicke eine Tabellenzeile, um gängige Größen von 1px bis 128px zu laden.

  4. 4

    Füge einen CSS-Block in die Massenumwandlung ein: Jeder px-Wert wird rem, 0px wird 0, und 1px-Rahmen können px bleiben. Kopiere das Ergebnis ins Stylesheet.

Praxisbeispiele

Typografie-Skala

Eine Skala von 14 / 16 / 20 / 24 / 32px wird zu 0,875 / 1 / 1,25 / 1,5 / 2rem, sodass Überschriften mitwachsen, wenn Nutzer die Schrift vergrößern.

Altes Stylesheet migrieren

Füge altes CSS in px ein, wandle Paddings, Margins und Schriftgrößen in einem Rutsch um, prüfe dann Media Queries und lass Haarlinien in px.

Figma-Design übernehmen

Designer liefern Maße in px. Wandle Abstands-Tokens wie 4, 8, 12, 16 und 24px in 0,25, 0,5, 0,75, 1 und 1,5rem für ein Designsystem um.

Der 62,5-%-Trick

Manche Projekte setzen html { font-size: 62.5% }, damit 1rem = 10px ist. Stelle die Root-Größe auf 10, dann werden 24px zu einfachen 2,4rem.

Häufige Fragen

Soll ich rem oder px verwenden?+

Nimm rem für Schriftgrößen und die meisten Abstände, damit das Layout die Schriftgrößen-Einstellung der Nutzer respektiert. px passt weiter für Rahmen, Schatten und feine Details.

Was ist der Unterschied zwischen rem und em?+

rem bezieht sich auf die Schriftgröße von html und bleibt berechenbar. em bezieht sich auf das Elternelement, verschachtelte em-Werte multiplizieren sich, praktisch für Komponenten, aber fehleranfällig.

Ist die Basis immer 16px?+

Das ist der Standard in jedem Browser, aber Nutzer können ihn ändern und dein CSS kann html überschreiben. Rechne immer mit der Root-Größe, die dein Projekt wirklich nutzt.

Sollten Media Queries rem verwenden?+

Media Queries in em oder rem beziehen sich auf die Browser-Standardschrift, nicht auf deine html-Regel, und passen sich an, wenn Nutzer Text zoomen. Viele Teams nutzen deshalb em in Media Queries.