So rechnen Sie px in rem um

Fügen Sie ein Stylesheet ein und geben Sie an, wie viele Pixel 1rem entspricht. Die Seite schreibt die px-Längen um und zeigt das Ergebnis mit derselben Formatierung wie bisher — nichts wird hochgeladen.

Die Division ist exakt: 16px mit einer Basis von 16px sind 1rem, 1.5px werden zu 0.09375rem, und eine Basis wie 16.5px wird so verwendet, wie sie geschrieben steht, statt gerundet zu werden.

  1. Fügen Sie das CSS in das Feld ein. Werte von Deklarationen und Media-Queries werden umgerechnet; Selektoren, Zeichenketten, Kommentare und der Inhalt von url() bleiben unverändert.
  2. Geben Sie an, wie viele Pixel 1rem entspricht. Der Standardwert 16 entspricht der üblichen Browser-Wurzelgröße, Dezimalwerte wie 16.5 sind erlaubt.
  3. Lassen Sie das border-Kästchen angehakt, wenn die Kurzschreibweisen border und border-top/right/bottom/left in px bleiben sollen — der übliche Weg, einen 1px-Rahmen nicht mitskalieren zu lassen.
  4. Klicken Sie auf Umrechnen und kopieren Sie das Ergebnis. Leeren entfernt Eingabe und Ergebnis.

Was umgerechnet wird und was unberührt bleibt

Längen, die umgerechnet werden

Längen werden in Deklarationswerten umgerechnet — padding, width, font-size, calc()-Ausdrücke, benutzerdefinierte Eigenschaften — und in media-, container- und supports-Abfragen. Ein Wert zählt, wenn auf eine Zahl die Einheit px folgt, unabhängig von der Schreibweise: 10PX wird ebenfalls umgerechnet.

Bruchwerte werden so umgerechnet, wie sie geschrieben sind: 1.5px werden bei 16px Basis zu 0.09375rem, .5px zu 0.03125rem. Das Ergebnis ist der exakte Quotient, solange die Division endet; ein periodischer Quotient wie 10px bei 16.5px Basis wird auf zwölf Nachkommastellen gerundet.

Text, der nie umgeschrieben wird

Selektoren, Klassennamen, Zeichenketten, Kommentare und der Inhalt von url() werden unverändert übernommen; content: "10px", .a10px und url(icon-10px.png) überstehen eine Umrechnung.

Das Werkzeug rechnet px-Werte in rem um und sonst nichts. Ein rem-Wert in der Eingabe bleibt stehen, eine Richtung rem nach px gibt es nicht, und andere Einheiten wie em, %, vw oder pt werden nicht angefasst.

Abgelehnte Eingaben, Basis und Ausgabe

Ein leeres Stylesheet, eine leere Basis, eine Basis von null oder darunter und eine Basis, die keine Zahl ist, werden abgelehnt: die Meldung steht in der Statuszeile unter den Bedienelementen, und das vorherige Ergebnis wird gelöscht, damit eine alte Umrechnung nicht für eine neue gehalten wird.

Ein CSS ohne einen einzigen px-Wert wird als solches gemeldet, das formatierte CSS erscheint trotzdem. Formatiert wird wie bisher: minifiziert bei einzeiliger Eingabe, eingerückt bei mehreren Zeilen. Die Meldungen folgen der Seitensprache: Englisch, Spanisch, Portugiesisch (Brasilien), Deutsch, Französisch oder Japanisch.

Zuletzt verwendet: