Sari la conținut
🛠️
Whiz Tools

Convertor PX în REM și EM – Calculator Gratuit de Unități CSS

Convertiți pixelii în unități REM și EM instant. Convertor gratuit de unități CSS pentru design web responsiv. Acceptă dimensiuni personalizate de font și calcule în timp real pentru rezultate precise.

Convertor de unități PX, REM și EM

Convertiți între pixeli (PX), rădăcină em (REM) și em (EM). Introduceți o valoare în orice câmp pentru a vedea valorile echivalente în celelalte unități.

px
px
px
rem
em
Vizualizarea nu este disponibilă pentru valori negative sau zero

Formule de conversie

  • PX la REM: valoare în px ÷ dimensiune font rădăcină
  • PX la EM: valoare în px ÷ dimensiune font element părinte
  • REM la PX: valoare în rem × dimensiune font rădăcină
  • EM la PX: valoare în em × dimensiune font element părinte
Calculator de încărcare...
📚

Documentație

Convertor de unități px, rem și em

Un convertor px în rem și em schimbă o lungime CSS între pixeli (px), em rădăcină (rem) și em, folosind o dimensiune a fontului rădăcină și o dimensiune a fontului elementului părinte, stabilite de utilizator. Cele trei unități sunt cele mai comune modalități de dimensionare a textului și a spațierii în CSS, limbajul folosit pentru stilizarea paginilor web.

Ce sunt px, rem și em?

Un pixel (px) este o unitate fixă. O casetă cu lățimea setată la 200px rămâne lată de 200px indiferent de dimensiunea fontului folosită de pagină.

Un rem („em rădăcină”) este o unitate care se scalează în funcție de dimensiunea fontului elementului rădăcină al paginii, de obicei eticheta <html>. Majoritatea browserelor setează dimensiunea fontului rădăcină la 16px, dacă site-ul nu o modifică. Dacă dimensiunea fontului rădăcină este 16px, atunci 1rem este egal cu 16px.

Un em este o unitate care se scalează în funcție de dimensiunea fontului elementului părinte, adică elementul care îl conține. Dacă un element părinte are font-size: 20px, atunci 1em în interiorul acelui părinte este egal cu 20px.

Diferența principală dintre rem și em constă în reperul folosit de fiecare. Rem se raportează întotdeauna la elementul rădăcină. Em se raportează la cel mai apropiat element părinte, astfel încât valoarea sa se poate schimba la fiecare nivel de imbricare.

Cum se calculează conversia din px în rem

Pentru a converti pixelii în rem, împărțiți valoarea în pixeli la dimensiunea fontului rădăcină:

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

unde r este lungimea în rem, p lungimea în pixeli, iar R dimensiunea fontului rădăcină în pixeli.

Exemplu de calcul

Cu dimensiunea implicită a fontului rădăcină de 16px, 24px se convertește în:

24 ÷ 16 = 1,5rem

Dacă un site setează dimensiunea fontului rădăcină la 10px (un truc frecvent, realizat prin setarea html { font-size: 62.5%; }, deoarece 62,5 % din 16px reprezintă 10px), aceeași valoare de 24px devine:

24 ÷ 10 = 2,4rem

Cum se calculează conversia din rem în px

Pentru conversia inversă, înmulțiți valoarea în rem cu dimensiunea fontului rădăcină:

p=r×Rp = r \times R

unde p este lungimea în pixeli, r lungimea în rem, iar R dimensiunea fontului rădăcină.

Cu un element rădăcină de 16px, 1.5rem se convertește înapoi astfel: 1,5 × 16 = 24px.

Cum se calculează conversia din px în em

Pentru a converti pixelii în em, împărțiți valoarea în pixeli la dimensiunea fontului elementului părinte:

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

unde e este lungimea în em, iar P dimensiunea fontului elementului părinte în pixeli.

Exemplu de calcul

Dacă dimensiunea fontului elementului părinte este 20px, atunci 24px se convertește în:

24 ÷ 20 = 1,2em

Cum se calculează conversia din em în px

Înmulțiți valoarea în em cu dimensiunea fontului părinte:

p=e×Pp = e \times P

unde p este lungimea în pixeli, e lungimea în em, iar P dimensiunea fontului părinte.

Cu un element părinte de 20px, 1.2em se convertește înapoi astfel: 1,2 × 20 = 24px.

Cum se calculează conversia din rem în em și din em în rem

Deoarece rem și em se raportează la dimensiuni diferite ale fontului, conversia dintre ele necesită atât dimensiunea fontului rădăcină, cât și dimensiunea fontului părinte:

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

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

unde R este dimensiunea fontului rădăcină, iar P dimensiunea fontului părinte.

Exemplu de calcul

Cu o dimensiune a fontului rădăcină de 16px și o dimensiune a fontului părinte de 20px, 2rem se convertește în:

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

Dacă dimensiunile fontului rădăcină și ale fontului părinte sunt egale, 1rem este întotdeauna egal cu 1em.

Când este utilă fiecare unitate

Pixelii sunt potriviți pentru detalii care nu ar trebui să-și schimbe dimensiunea, cum ar fi un chenar de 1px sau o pictogramă cu lățime fixă.

Rem este folosit frecvent pentru spațiere și tipografie care ar trebui să rămână consecvente pe întreaga pagină. Deoarece se raportează întotdeauna la dimensiunea fontului rădăcină, o valoare rem nu se schimbă indiferent cât de adânc este imbricat un element. Aceasta înseamnă și că aspectele bazate pe rem se ajustează automat când utilizatorul mărește dimensiunea implicită a fontului în browser, ceea ce îi ajută pe cititorii cu vedere slabă.

Em este potrivit în interiorul unei singure componente autonome, cum ar fi un buton, unde spațiul interior ar trebui să se scaleze împreună cu dimensiunea proprie a fontului butonului. O problemă frecventă a unității em este cumularea: dacă mai multe elemente imbricate folosesc font-size: 1.2em, fiecare nivel îl multiplică pe cel anterior, astfel încât dimensiunile fontului cresc mai repede decât s-ar intenționa.

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

După trei niveluri, textul a crescut cu aproximativ 73 %, nu cu 20 %, cât s-ar putea aștepta un dezvoltator de la o singură regulă 1.2em.

Utilizarea convertorului

  1. Introduceți o valoare în câmpul pentru pixeli, rem sau em.
  2. Celelalte două câmpuri se actualizează automat, cu rotunjire la patru zecimale.
  3. Setați dimensiunea fontului rădăcină pentru a corespunde elementului <html> al proiectului. În majoritatea browserelor, aceasta este implicit 16px și afectează doar unitatea rem.
  4. Setați dimensiunea fontului părinte pentru a corespunde dimensiunii fontului elementului în interiorul căruia s-ar afla o valoare em. Aceasta afectează doar unitatea em.
  5. Folosiți butonul de copiere de lângă un câmp pentru a-i copia valoarea.

Ambele câmpuri pentru dimensiunea fontului acceptă un număr întreg de pixeli, iar valoarea minimă permisă este 1px. Butonul de resetare șterge valoarea și readuce ambele dimensiuni ale fontului la 16px.

Sub câmpuri, instrumentul desenează câte o bară pentru fiecare unitate. Toate cele trei bare reprezintă aceeași lungime fizică, astfel încât au aceeași lățime; aceasta este o verificare rapidă că conversia este corectă. O bară este desenată la lungimea sa reală în pixeli până la 300px; orice valoare mai mare este redusă pentru a încăpea, astfel încât o valoare de 600px și una de 900px ajung ambele la 300px. Barele apar numai când valoarea în pixeli este mai mare decât zero.

Întrebări frecvente

Care este diferența dintre rem și em? Rem se raportează întotdeauna la dimensiunea fontului elementului rădăcină. Em se raportează la dimensiunea fontului celui mai apropiat element părinte. O valoare rem rămâne aceeași oriunde pe pagină; o valoare em se poate schimba în funcție de cât de adânc este imbricat elementul.

De ce folosesc browserele 16px ca dimensiune implicită a fontului? 16px este de mult timp dimensiunea implicită a textului în browserele importante, deoarece este ușor de citit pe ecranele obișnuite fără stilizare suplimentară. Recomandările privind accesibilitatea web prevăd ca textul să poată fi redimensionat până la 200 % fără a afecta aspectul paginii, iar 16px reprezintă un punct de pornire practic pentru acest lucru.

Ce este trucul 62,5 %? Setarea html { font-size: 62.5%; } transformă dimensiunea implicită a fontului rădăcină, de 16px, în 10px, deoarece 62,5 % din 16 este 10. Aceasta simplifică calculele pentru rem, deoarece 1,6rem este egal cu 16px, iar 2,4rem este egal cu 24px.

Pot fi valorile px, rem și em negative? Da, pentru proprietățile care acceptă lungimi negative, cum ar fi marginile sau transformările CSS. Spațiul interior nu poate fi negativ în CSS; browserele ignoră o valoare negativă pentru spațiul interior. Convertorul gestionează valorile negative, dar nu desenează bare pentru acestea, deoarece o bară nu poate avea o lățime negativă.

Ar trebui convertită fiecare valoare în pixeli în rem? Nu neapărat. Chenarele și alte detalii fine sunt de obicei păstrate în pixeli, deoarece rareori trebuie să se scaleze odată cu dimensiunea fontului și pot arăta neuniform la lățimi subpixel. Rem este potrivit pentru spațiere și tipografie care ar trebui să se scaleze în funcție de preferința utilizatorului pentru dimensiunea fontului.

Alegerea unității afectează performanța paginii? Nu. Browserele convertesc fiecare lungime CSS în aceeași valoare internă în timpul aranjării, astfel încât px, rem și em sunt afișate la aceeași viteză. Alegerea dintre ele afectează mentenanța și accesibilitatea, nu viteza.