Hopp til innhold
🛠️
Whiz Tools

PX til REM til EM Konverter – Gratis CSS Enhetsberegner

Konverter piksler til REM og EM enheter umiddelbart. Gratis CSS enhetskonverter for responsiv webdesign. Støtter tilpassede skriftstørrelser og sanntidsberegninger for nøyaktige resultater.

PX, REM og EM enhetskonvertering

Konverter mellom piksler (PX), rot em (REM) og em (EM) enheter. Skriv inn en verdi i et hvilket som helst felt for å se tilsvarende verdier i de andre enhetene.

px
px
px
rem
em
Visualisering ikke tilgjengelig for negative eller null-verdier

Konverteringsformler

  • PX til REM: verdi i px ÷ rot skriftstørrelse
  • PX til EM: verdi i px ÷ overordnet skriftstørrelse
  • REM til PX: verdi i rem × rot skriftstørrelse
  • EM til PX: verdi i em × overordnet skriftstørrelse
Lastekalkulator...
📚

Dokumentasjon

Konvertering mellom px, rem og em

En konverterer fra px til rem og em endrer en CSS-lengde mellom piksler (px), root em (rem) og em ved hjelp av en skriftstørrelse for rotelementet og en skriftstørrelse for det overordnede elementet som brukeren angir. De tre enhetene er de vanligste måtene å angi størrelse på tekst og mellomrom i CSS, språket som brukes til å utforme nettsider.

Hva er px, rem og em?

En piksel (px) er en fast enhet. En boks med bredden 200px forblir 200 piksler bred, uansett hvilken skriftstørrelse siden bruker.

En rem («root em») er en måleenhet som skaleres med skriftstørrelsen til sidens rotelement, vanligvis <html>-taggen. De fleste nettlesere setter skriftstørrelsen for rotelementet til 16 piksler, med mindre nettstedet endrer den. Hvis skriftstørrelsen for rotelementet er 16 piksler, er 1rem lik 16 piksler.

En em er en enhet som skaleres med skriftstørrelsen til det overordnede elementet, altså elementet som inneholder den. Hvis et overordnet element har font-size: 20px, er 1em inne i dette elementet lik 20 piksler.

Hovedforskjellen mellom rem og em er hva hver av dem måles mot. Rem ser alltid på rotelementet. Em ser på det nærmeste overordnede elementet, så verdien kan endre seg på hvert nivå i nøstingen.

Slik beregnes px til rem

For å konvertere piksler til rem divideres pikselverdien med skriftstørrelsen for rotelementet:

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

der r er lengden i rem, p er lengden i piksler og R er skriftstørrelsen for rotelementet i piksler.

Regneeksempel

Med standard skriftstørrelse for rotelementet på 16 piksler konverteres 24 piksler til:

24 ÷ 16 = 1,5 rem

Hvis et nettsted setter skriftstørrelsen for rotelementet til 10 piksler (et vanlig triks som gjøres ved å sette html { font-size: 62.5%; }, siden 62,5 % av 16 piksler er 10 piksler), blir de samme 24 pikslene:

24 ÷ 10 = 2,4 rem

Slik beregnes rem til px

Den motsatte konverteringen gjøres ved å multiplisere rem-verdien med skriftstørrelsen for rotelementet:

p=r×Rp = r \times R

der p er lengden i piksler, r er lengden i rem og R er skriftstørrelsen for rotelementet.

Med et rotelement på 16 piksler konverteres 1.5rem tilbake til 1,5 × 16 = 24 piksler.

Slik beregnes px til em

For å konvertere piksler til em divideres pikselverdien med skriftstørrelsen til det overordnede elementet:

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

der e er lengden i em og P er skriftstørrelsen til det overordnede elementet i piksler.

Regneeksempel

Hvis skriftstørrelsen til det overordnede elementet er 20 piksler, konverteres 24 piksler til:

24 ÷ 20 = 1,2 em

Slik beregnes em til px

Multipliser em-verdien med skriftstørrelsen til det overordnede elementet:

p=e×Pp = e \times P

der p er lengden i piksler, e er lengden i em og P er skriftstørrelsen til det overordnede elementet.

Med et overordnet element på 20 piksler konverteres 1.2em tilbake til 1,2 × 20 = 24 piksler.

Slik beregnes rem til em og em til rem

Fordi rem og em måles mot forskjellige skriftstørrelser, krever konvertering mellom dem både skriftstørrelsen for rotelementet og skriftstørrelsen til det overordnede elementet:

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

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

der R er skriftstørrelsen for rotelementet og P er skriftstørrelsen til det overordnede elementet.

Regneeksempel

Med en skriftstørrelse for rotelementet på 16 piksler og en skriftstørrelse for det overordnede elementet på 20 piksler konverteres 2rem til:

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

Hvis skriftstørrelsene for rotelementet og det overordnede elementet er like, er 1 rem alltid lik 1 em.

Når hver enhet er nyttig

Piksler fungerer godt for detaljer som ikke bør endre størrelse, for eksempel en kantlinje på 1 piksel eller et ikon med fast bredde.

Rem er vanlig for mellomrom og typografi som bør være konsekvent på en side. Ettersom rem alltid viser til skriftstørrelsen for rotelementet, endres ikke en rem-verdi, uansett hvor dypt et element er nøstet. Det betyr også at rem-baserte oppsett justeres automatisk når en bruker øker nettleserens standard skriftstørrelse, noe som hjelper lesere med nedsatt syn.

Em fungerer godt inne i en enkelt, selvstendig komponent, for eksempel en knapp, der utfyllingen bør skaleres sammen med knappens egen skriftstørrelse. Et vanlig problem med em er at verdien forsterkes: Hvis flere nøstede elementer hver bruker font-size: 1.2em, multipliserer hvert nivå det forrige, slik at skriftstørrelsene vokser raskere enn beregnet.

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

Etter tre nivåer har teksten vokst med omtrent 73 %, ikke 20 % slik en utvikler kanskje forventer av én enkelt regel med 1.2em.

Slik bruker du konverteren

  1. Skriv inn en verdi i piksel-, rem- eller em-feltet.
  2. De to andre feltene oppdateres automatisk, avrundet til fire desimaler.
  3. Angi skriftstørrelsen for rotelementet slik at den samsvarer med <html>-elementet i prosjektet. Den er 16 piksler som standard i de fleste nettlesere, og den påvirker bare rem.
  4. Angi skriftstørrelsen for det overordnede elementet slik at den samsvarer med skriftstørrelsen til elementet som en em-verdi skal ligge i. Den påvirker bare em.
  5. Bruk kopieringsknappen ved siden av et felt for å kopiere verdien.

Begge skriftstørrelsesfeltene godtar et helt antall piksler, og den minste tillatte verdien er 1 piksel. Tilbakestillingsknappen tømmer verdien og setter begge skriftstørrelsene tilbake til 16 piksler.

Under feltene tegner verktøyet én stolpe per enhet. Alle de tre stolpene representerer samme fysiske lengde, så de får samme bredde. Dette er en rask kontroll av at konverteringen er riktig. En stolpe tegnes med sin faktiske pikselbredde opptil 300 piksler; alt som er lengre skaleres ned for å få plass, slik at en verdi på 600 piksler og en verdi på 900 piksler begge ender på 300 piksler. Stolpene vises bare når pikselverdien er større enn null.

Ofte stilte spørsmål

Hva er forskjellen mellom rem og em? Rem viser alltid til skriftstørrelsen til rotelementet. Em viser til skriftstørrelsen til det nærmeste overordnede elementet. En rem-verdi forblir den samme overalt på en side, mens en em-verdi kan endre seg avhengig av hvor dypt elementet er nøstet.

Hvorfor bruker nettlesere 16 piksler som standard skriftstørrelse? 16 piksler har lenge vært standard tekststørrelse i de største nettleserne fordi den er behagelig å lese på vanlige skjermer uten ekstra styling. Retningslinjer for universell utforming anbefaler at tekst skal kunne forstørres til 200 % uten at sideoppsettet bryter sammen, og 16 piksler er et praktisk utgangspunkt for dette.

Hva er 62,5 %-trikset? Ved å sette html { font-size: 62.5%; } gjøres standard skriftstørrelse for rotelementet på 16 piksler om til 10 piksler, siden 62,5 % av 16 er 10. Dette gjør rem-beregninger enklere, fordi 1,6 rem er lik 16 piksler og 2,4 rem er lik 24 piksler.

Kan px-, rem- og em-verdier være negative? Ja, for egenskaper som tillater negative lengder, for eksempel marger eller CSS-transformasjoner. Utfylling kan ikke være negativ i CSS; nettlesere ignorerer en negativ verdi for utfylling. Konverteren håndterer negative verdier, men tegner ingen stolper for dem, fordi en stolpe ikke kan ha negativ bredde.

Bør alle pikselverdier konverteres til rem? Ikke nødvendigvis. Kantlinjer og andre fine detaljer beholdes vanligvis i piksler, siden de sjelden trenger å skaleres med skriftstørrelsen og kan se ujevne ut ved bredder på mindre enn én piksel. Rem passer for mellomrom og typografi som bør skaleres etter brukerens preferanse for skriftstørrelse.

Påvirker valg av enhet ytelsen til siden? Nei. Nettlesere konverterer alle CSS-lengder til den samme interne verdien under layoutberegningen, så px, rem og em gjengis like raskt. Valget mellom dem påvirker vedlikeholdbarhet og tilgjengelighet, ikke hastighet.