Webentwickler

px ↔ rem umrechnen

Zwischen px und rem umrechnen

Nur für Mitglieder

Der Rechner selbst ist gesperrt

Lege einen kostenlosen Zugang an, um alle Artikel, Rechner, Vorlagen und das Sortiment freizuschalten — und Zugriff auf Quizze und Klassen zu erhalten. Es dauert unter einer Minute: Name, E-Mail und ein Passwort. Keine Zahlungskarte.

Kostenlosen Benutzer erstellen →Anmelden

Willst du zuerst etwas ausprobieren? Sieh, was du ohne Konto nutzen kannst — der Junior-Bereich, das Lexikon, die Videos und mehr.

Sådan bruger du den

Designet fra Figma står i pixels, men i CSS skal skriftstørrelser, margener og breakpoints helst stå i rem, så siden vokser med, når brugeren sætter browserens skrift op. Beregneren omregner en px-værdi til rem ud fra rod-skriftstørrelsen, som normalt er 16 px.

Schritt für Schritt

Find værdien i designfilen i px, fx en overskrift på 24 px.
Find rod-skriftstørrelsen. Den er 16 px, medmindre html har fået en anden font-size i jeres CSS.
Del px-værdien med rod-størrelsen. Det er værdien i rem.
Skriv rem-værdien i CSS, og tjek i browseren med skriften sat op til 200 %.

Typische Fehler

At regne med 16 px, når projektet har ændret rod-størrelsen. Se efter font-size på html i CSS'en.
At bruge em i stedet for rem. em regnes ud fra forælderens størrelse og ganges op i indlejrede elementer.
At sætte rod-størrelsen i px (html { font-size: 16px }). Så overskriver du brugerens egen indstilling i browseren.

Beispiele aus dem Alltag

Overskrift fra Figma

Designeren har sat h2 til 24 px i et kundeprojekt for en tandlægeklinik. Sitet bruger browserens standardrod.

Wert: 24
Root-Schriftgröße: 16

rem = 24 px ÷ 16 px = 1,5 rem
Tilbage til px: 1,5 × 16 = 24 px

Es bedeutet: Skriv font-size: 1.5rem. Sætter en bruger browserens skrift til 20 px, bliver overskriften 30 px og bevarer forholdet til brødteksten.

Lille hjælpetekst under et felt

Hjælpeteksten under et formularfelt er 14 px i designet.

Wert: 14
Root-Schriftgröße: 16

rem = 14 px ÷ 16 px = 0,875 rem

Es bedeutet: Skriv font-size: 0.875rem. Mindre end det bør tekst, man skal kunne læse, ikke være.

Et ældre projekt med 62,5 %-tricket

Du overtager et site, hvor html har font-size: 62.5 %, så 1 rem er 10 px. Brødteksten skal være 18 px.

Wert: 18
Root-Schriftgröße: 10

rem = 18 px ÷ 10 px = 1,8 rem

Es bedeutet: Her skal der stå 1.8rem. Kopierer du rem-værdier fra et site med 16 px-rod, bliver alt 37,5 % mindre, så tjek altid rodens størrelse først.

Faustregel

Ved 16 px-rod: 8 px = 0,5 rem, 12 px = 0,75 rem, 24 px = 1,5 rem, 32 px = 2 rem.

So überprüfst du die Antwort

Gang rem-værdien med rod-størrelsen. Så skal du få px-værdien fra designet igen.