So funktioniert’s
- Tragen Sie unter „Root-Schriftgröße“ die Schriftgröße Ihres html-Elements in px ein, standardmäßig 16.
- Wählen Sie unter „Genauigkeit“ die maximale Anzahl der Nachkommastellen von 0 bis 6.
- Geben Sie einen Wert mit Einheit ein, etwa 24px oder 1.5rem. Die beiden anderen Einheiten werden automatisch berechnet.
- Stellen Sie für em bei Bedarf die „Schriftgröße des Elternelements für em“ ein.
Beispiele
Schriftgröße bei einer Root-Schriftgröße von 10px
14px
1.4rem (14px ÷ 10px)
Nur Schriftwerte einer Produktkarte umrechnen
.produktkarte {
font-size: 18px;
line-height: 24px;
padding: 16px;
border: 1px solid #ccc;
}.produktkarte {
font-size: 1.125rem;
line-height: 1.5rem;
padding: 16px;
border: 1px solid #ccc;
}Abstände von rem zurück in px
.navigation {
gap: 0.75rem 2rem;
padding: 1rem;
}.navigation {
gap: 12px 32px;
padding: 16px;
}Tipps
- Bereinigen Sie die umgerechnete Datei mit dem CSS Formatter.
- Verkleinern Sie sie mit dem CSS Minifier.
Häufige Fragen
Wie rechnet man px in rem und rem in px um?
Teilen Sie den px-Wert durch die Root-Schriftgröße, um rem zu berechnen. Für die Rückrechnung multiplizieren Sie den rem-Wert mit der Root-Schriftgröße: Bei 16px entsprechen 2rem genau 32px.
Was ist der Unterschied zwischen rem und em?
rem bezieht sich auf die Schriftgröße des html-Elements, em auf die Schriftgröße des Elternelements. In CSS-Dateien rechnet das Tool nur px und rem um, keine em-Werte.
Werden Media Queries auch umgerechnet?
Aktivieren Sie „Media Queries umrechnen“, um auch Werte in @media- und @container-Bedingungen zu ändern. Beachten Sie: rem in Media Queries bezieht sich auf die Standard-Schriftgröße des Browsers, nicht auf Ihre eingestellte Root-Schriftgröße.
Was passiert mit 0px in calc()?
Das Tool ersetzt 0px auch innerhalb von calc() durch 0 ohne Einheit. Dadurch kann beispielsweise calc(0px + 10px) ungültig werden. Prüfen Sie solche Ausdrücke nach der Umrechnung.
Wird meine CSS-Datei auf einen Server hochgeladen?
Die Umrechnung läuft im Browser. Werte und CSS werden weder übertragen noch gespeichert. Gespeichert werden nur Einstellungen und der zuletzt gewählte Tab. Google Analytics erhält Nutzungsereignisse, aber keine eingegebenen Werte oder CSS-Inhalte.