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.