Przejdź do treści
Discebo.dk

Webdeveloper

przeliczanie px ↔ rem

Przeliczanie między px a rem

Tylko dla członków

Sam kalkulator jest zablokowane

Utwórz bezpłatne konto, aby odblokować wszystkie artykuły, kalkulatory, szablony i asortyment — i uzyskać dostęp do quizów i klas. Zajmuje to poniżej minuty: imię, email i hasło. Żadna karta kredytowa.

Utwórz darmowe konto →Zaloguj się

Chcesz najpierw czegoś spróbować? Zobacz, czego możesz używać bez konta — strefa junior, leksykon, filmy i więcej.

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.

Krok za krokiem

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

Typowe błędy

  • 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.

Przykłady z codzienności

Overskrift fra Figma

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

Wartość
24
Rozmiar czcionki głównej
16
  • rem = 24 px ÷ 16 px = 1,5 rem
  • Tilbage til px: 1,5 × 16 = 24 px

To znaczy: 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.

Wartość
14
Rozmiar czcionki głównej
16
  • rem = 14 px ÷ 16 px = 0,875 rem

To znaczy: 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.

Wartość
18
Rozmiar czcionki głównej
10
  • rem = 18 px ÷ 10 px = 1,8 rem

To znaczy: 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.

Reguła praktyczna

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

Jak sprawdzić odpowiedź

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