Hoppa till innehåll
🛠️
Whiz Tools

PX till REM till EM-omvandlare – Gratis CSS-enhetsräknare

Konvertera pixlar till REM och EM-enheter direkt. Gratis CSS-enhetsomvandlare för responsiv webbdesign. Stöder anpassade teckensnittsstorlekar och realtidsberäkningar för exakta resultat.

PX, REM och EM-enhetsomvandlare

Konvertera mellan pixlar (PX), root em (REM) och em (EM) enheter. Ange ett värde i valfritt fält för att se motsvarande värden i andra enheter.

px
px
px
rem
em
Visualisering inte tillgänglig för negativa eller nollvärden

Konverteringsformler

  • PX till REM: värde i px ÷ rot teckenstorlek
  • PX till EM: värde i px ÷ föräldraelementets teckenstorlek
  • REM till PX: värde i rem × rot teckenstorlek
  • EM till PX: värde i em × föräldraelementets teckenstorlek
Laddningsberäknare...
📚

Dokumentation

Omvandlare för enheter: px, rem och em

En omvandlare från px till rem och em ändrar en CSS-längd mellan pixlar (px), rot-em (rem) och em, med hjälp av en rotteckenstorlek och en teckenstorlek för ett överordnat element som användaren anger. De tre enheterna är de vanligaste sätten att ange storlek på text och avstånd i CSS, språket som används för att utforma webbsidor.

Vad är px, rem och em?

En pixel (px) är en fast enhet. En ruta som har bredden 200px förblir 200px bred oavsett vilken teckenstorlek sidan använder.

En rem (”rot-em”) är en enhet som skalas efter teckenstorleken för sidans rotelement, normalt taggen <html>. De flesta webbläsare anger rotteckenstorleken till 16px om inte webbplatsen ändrar den. Om rotteckenstorleken är 16px motsvarar 1rem 16px.

En em är en enhet som skalas efter teckenstorleken för det överordnade elementet, alltså elementet som innehåller den. Om ett överordnat element har font-size: 20px motsvarar 1em inuti det elementet 20px.

Den viktigaste skillnaden mellan rem och em är vad de mäts mot. Rem utgår alltid från rotelementet. Em utgår från det närmaste överordnade elementet, så värdet kan ändras på varje nästlingsnivå.

Så beräknar du px till rem

Om du vill omvandla pixlar till rem dividerar du pixelvärdet med rotteckenstorleken:

r=pRr = \frac{p}{R}

där r är längden i rem, p längden i pixlar och R rotteckenstorleken i pixlar.

Räkneexempel

Med standardvärdet 16px för rotteckenstorleken omvandlas 24px till:

24 ÷ 16 = 1,5rem

Om en webbplats anger rotteckenstorleken till 10px (ett vanligt knep som utförs genom att ange html { font-size: 62.5%; }, eftersom 62,5 % av 16px är 10px), blir samma 24px:

24 ÷ 10 = 2,4rem

Så beräknar du rem till px

Åt andra hållet multiplicerar du rem-värdet med rotteckenstorleken:

p=r×Rp = r \times R

där p är längden i pixlar, r längden i rem och R rotteckenstorleken.

Med en rotteckenstorlek på 16px omvandlas 1.5rem tillbaka till 1,5 × 16 = 24px.

Så beräknar du px till em

Om du vill omvandla pixlar till em dividerar du pixelvärdet med det överordnade elementets teckenstorlek:

e=pPe = \frac{p}{P}

där e är längden i em och P det överordnade elementets teckenstorlek i pixlar.

Räkneexempel

Om det överordnade elementets teckenstorlek är 20px omvandlas 24px till:

24 ÷ 20 = 1,2em

Så beräknar du em till px

Multiplicera em-värdet med den överordnade teckenstorleken:

p=e×Pp = e \times P

där p är längden i pixlar, e längden i em och P den överordnade teckenstorleken.

Med ett överordnat element på 20px omvandlas 1.2em tillbaka till 1,2 × 20 = 24px.

Så beräknar du rem till em och em till rem

Eftersom rem och em mäts mot olika teckenstorlekar kräver omvandling mellan dem både rotteckenstorleken och den överordnade teckenstorleken:

e=r×RPe = r \times \frac{R}{P}

r=e×PRr = e \times \frac{P}{R}

där R är rotteckenstorleken och P den överordnade teckenstorleken.

Räkneexempel

Med en rotteckenstorlek på 16px och en överordnad teckenstorlek på 20px omvandlas 2rem till:

2 × (16 ÷ 20) = 1,6em

Om rotteckenstorleken och den överordnade teckenstorleken är lika med varandra motsvarar 1rem alltid 1em.

När varje enhet är användbar

Pixlar fungerar bra för detaljer som inte ska ändra storlek, till exempel en 1px-ram eller en ikon med fast bredd.

Rem används ofta för avstånd och typografi som ska förbli konsekventa på en sida. Eftersom rem alltid hänvisar till rotteckenstorleken ändras ett rem-värde inte, oavsett hur djupt ett element är nästlat. Det innebär också att rem-baserade layouter automatiskt anpassas när användaren ökar webbläsarens standardteckenstorlek, vilket underlättar för personer med nedsatt syn.

Em fungerar bra i en enda, avgränsad komponent, till exempel en knapp där utfyllnaden ska skalas tillsammans med knappens egen teckenstorlek. Ett vanligt problem med em är att värdet ackumuleras: om flera nästlade element vart och ett använder font-size: 1.2em multiplicerar varje nivå värdet från den föregående, så teckenstorlekarna växer snabbare än avsett.

1.level-1 { font-size: 1.2em; }  /* 19.2px, if the parent is 16px */
2.level-2 { font-size: 1.2em; }  /* 23.04px (19.2px × 1.2) */
3.level-3 { font-size: 1.2em; }  /* 27.65px (23.04px × 1.2) */
4

Efter tre nivåer har texten vuxit med ungefär 73 %, inte de 20 % som en utvecklare kanske förväntar sig av en enda 1.2em-regel.

Använda omvandlaren

  1. Ange ett värde i fältet för pixel, rem eller em.
  2. De två andra fälten uppdateras automatiskt och avrundas till fyra decimaler.
  3. Ange rotteckenstorleken så att den motsvarar <html>-elementet i projektet. I de flesta webbläsare är den 16px som standard, och den påverkar endast rem.
  4. Ange den överordnade teckenstorleken så att den motsvarar teckenstorleken för elementet som ett em-värde skulle ligga inuti. Den påverkar endast em.
  5. Använd kopieringsknappen bredvid ett fält för att kopiera dess värde.

Båda fälten för teckenstorlek tar emot ett helt antal pixlar, och det minsta tillåtna värdet är 1px. Återställningsknappen rensar värdet och återställer båda teckenstorlekarna till 16px.

Under fälten ritar verktyget en stapel per enhet. Alla tre staplar representerar samma fysiska längd, så de får samma bredd, vilket är en snabb kontroll av att omvandlingen är korrekt. En stapel ritas med sin verkliga pixellängd upp till 300px; allt som är längre skalas ned för att få plats, så ett värde på 600px och ett värde på 900px slutar båda på 300px. Staplarna visas bara när pixelvärdet är större än noll.

Vanliga frågor

Vad är skillnaden mellan rem och em? Rem hänvisar alltid till rotelementets teckenstorlek. Em hänvisar till teckenstorleken för det närmaste överordnade elementet. Ett rem-värde förblir detsamma överallt på en sida; ett em-värde kan ändras beroende på hur djupt elementet är nästlat.

Varför använder webbläsare 16px som standardteckenstorlek? 16px har länge varit standardstorleken för text i stora webbläsare, eftersom den är bekväm att läsa på vanliga skärmar utan extra formatering. Riktlinjer för webbtillgänglighet rekommenderar att text ska kunna förstoras till 200 % utan att sidans layout går sönder, och 16px är en praktisk utgångspunkt för detta.

Vad är knepet med 62,5 %? Om man anger html { font-size: 62.5%; } ändras den standardmässiga rotteckenstorleken på 16px till 10px, eftersom 62,5 % av 16 är 10. Det gör rem-beräkningar enklare, eftersom 1,6rem motsvarar 16px och 2,4rem motsvarar 24px.

Kan värden för px, rem och em vara negativa? Ja, för egenskaper som tillåter negativa längder, till exempel marginaler eller CSS-transformeringar. Padding kan inte vara negativ i CSS; webbläsare ignorerar negativa paddingvärden. Omvandlaren hanterar negativa värden, men ritar inga staplar för dem, eftersom en stapel inte kan ha negativ bredd.

Bör alla pixelvärden omvandlas till rem? Inte nödvändigtvis. Ramar och andra fina detaljer anges vanligtvis i pixlar, eftersom de sällan behöver skalas efter teckenstorleken och kan se ojämna ut vid delpixelbredder. Rem passar för avstånd och typografi som ska skalas efter användarens inställning av teckenstorleken.

Påverkar valet av enhet sidans prestanda? Nej. Webbläsare omvandlar alla CSS-längder till samma interna värde under layoutberäkningen, så px, rem och em renderas lika snabbt. Valet mellan dem påverkar underhållbarhet och tillgänglighet, inte hastigheten.