Softonic

EM till REM-omvandlare

Steg 1 / 2 rem
Resultat

En designer skickar dig Figma-specifikationer i pixlar, kodbasen använder rem, och hälften av komponenterna är byggda med em på ställen där värdet ändras beroende på det överordnade elementets teckenstorlek. Den här omvandlaren beräknar px- och rem-ekvivalenterna för valfritt em-värde vid vilken rotteckenstorlek som helst, så att du kan kopiera rätt värde rakt in i CSS-filen utan att räkna om det i huvudet varje gång.

Så här omvandlar du em, rem och pixlar

  1. 1

    Ställ in grundteckenstorleken

    Vanligtvis 16px, webbläsarens standardvärde. Vissa designsystem använder 14px eller 18px som rot.

  2. 2

    För em: ställ in det överordnade elementets teckenstorlek

    em är relativt till det överordnade elementet. Om det överordnade elementet är 20px motsvarar 1em 20px.

  3. 3

    Ange ett värde

    I em; px- och rem-ekvivalenterna uppdateras automatiskt.

  4. 4

    Läs av omvandlingen

    Värdena för px, em och rem visas både avrundade och med exakta decimaler.

Formlerna

rem är alltid relativt till rotelementet (<html>):

px = rem * root_font_size rem = px / root_font_size

em är relativt till det överordnade elementet för det aktuella elementet:

px = em * parent_font_size em = px / parent_font_size

Omvandlingar vid rot 16px

Pixlar rem em (vid överordnad på 16px)
10 0.625 0.625
12 0.75 0.75
14 0.875 0.875
16 1 1
18 1.125 1.125
20 1.25 1.25
24 1.5 1.5
32 2 2
48 3 3
64 4 4

När ska man använda vilken

  • px: kanter, fina detaljer, exakt kontroll. En box-shadow på 1px, en kant på 1px.
  • rem: marginaler, utfyllnad och typografi som ska skala med användarens teckenstorleksinställning.
  • em: komponentlokala avstånd som anpassar sig efter komponentens egen teckenstorlek (knappar, märken).
  • % och vw/vh: relativt till behållaren respektive visningsytan – det är ett separat ämne.

62,5-procentsknepet

Vissa kodbaser anger html { font-size: 62.5%; }, vilket gör att 1rem = 10px. Det förenklar rem-beräkningen (24px = 2.4rem), men till priset av att teckenstorleksinställningen i webbläsaren slutar fungera för användare som zoomar in text. Modern praxis undviker det här tricket; använd rot 16px och acceptera decimaler.

em-arvets fälla

em ärvs genom kaskaden. Om ett överordnat element har font-size 1.2em i förhållande till sin egen förälder, och du inuti det anger padding 1em, blir utfyllnaden 1.2 × 1.2 = 1.44 × roten. Nästlade em multipliceras med varandra, vilket kan ge oväntade resultat. rem undviker detta eftersom det alltid beräknas mot <html>.

Exempel på en typografisk skala

En vanlig modulär typskala med förhållandet 1.25:

Nivå rem px (vid rot 16)
Bildtext 0.75 12
Brödtext 1 16
Brödtext+ 1.125 18
H4 1.25 20
H3 1.5625 25
H2 1.953 ~31
H1 2.441 ~39
Blickfång 3.052 ~49

Att använda rem innebär att varje nivå skalar proportionellt om en användare ökar webbläsarens teckenstorlek för tillgänglighetens skull.

Respektera användarens inställningar

Att hårdkoda px genom ett helt stilmall försämrar upplevelsen för användare som zoomar in text av synskäl. rem respekterar dessa inställningar eftersom det beräknas mot rotstorleken, som användaren kan ändra. Det är huvudskälet till att stilguider rekommenderar rem för typografi och avstånd.

Vanliga frågor

Använd rem för typografi, avstånd och layoutstorlekar. Använd em för storlekar inuti en komponent som ska skala med komponentens egen teckenstorlek (knappar, ikoner i text). Använd px endast för fina detaljer som inte får skala.

Användare kan ändra webbläsarens standardteckenstorlek. Chrome har 16px som standard; om användaren har ställt in 18px blir alla dina rem-värden 12,5 procent större. Designers som utgår från en fast rot på 16px missar ofta detta; rem respekterar användarens val, vilket är hela poängen.

Tailwinds avståndsskala använder rem. text-base är 1rem = 16px som standard, text-lg är 1.125rem. Skalan är konsekvent och respekterar rotteckenstorleken direkt.

Nej. De siffror du anger används bara för att beräkna omvandlingen och ingenting sparas.

Relaterade verktyg

ASCII-tabellreferens

Full ASCII-tabell från 0 till 127 med decimal-, hex-, oktal- och binärvärden samt notation för numeriska HTML-referenser, inklusive NUL, LF och DEL.

HTML-teckenreferens

En sökbar lista över HTML-entiteter med deras namngivna och numeriska koder samt kopiering med ett klick för specialtecken och symboler.

Referens för kortkommandon

Sök dokumenterade standardkommandon för VS Code, Chrome och Bash med GNU Readline i macOS, Windows och Linux.

Slumpgenerator för bokstäver

Generera slumpade A-Z-bokstäver. Välj antal, versaler, gemener eller blandat läge och använd resultatet för spel, uppgifter eller klassrumsaktiviteter.

HTML-formaterare

Formatera HTML lokalt i webbläsaren med indrag på två eller fyra blanksteg. HTML laddas inte upp eller valideras.

Färgpalettgenerator

Skapa monokromatiska, analoga, komplementära, triadiska eller tetradiska färgpaletter från en HEX-basfärg och exportera kopieringsklara CSS-variabler.

Verktyget finns på andra språk