Convertor px în rem și em (și invers)

Exemple cu rem și em

Variante gata făcute: copiază codul direct sau deschide exemplul în generator și modifică-l după nevoie.

Tipografie în rem (bază 16px) Titlurile cresc odată cu mărimea textului aleasă de vizitator în browser.

h1 { font-size: 2.5rem; }    /* 40px */
h2 { font-size: 2rem; }      /* 32px */
h3 { font-size: 1.5rem; }    /* 24px */
p  { font-size: 1.125rem; }  /* 18px */
small { font-size: 0.875rem; } /* 14px */

Trucul cu 62,5% 1rem devine 10px, așa că 24px = 2.4rem. Corpul paginii primește înapoi mărimea normală.

html { font-size: 62.5%; }   /* 16px × 62,5% = 10px */
body { font-size: 1.6rem; }  /* 16px */
.card { padding: 2.4rem; }   /* 24px */

em pentru spațierea unui buton Spațiul interior crește odată cu fontul butonului.

.buton {
  font-size: 14px;
  padding: 0.75em 1.5em;  /* 10.5px 21px */
}

.buton--mare { font-size: 18px; }  /* padding devine 13.5px 27px */

Media query în em În @media, rem și em se raportează la mărimea implicită a browserului (de obicei 16px).

/* 768px ÷ 16 = 48em */
@media (min-width: 48em) {
  .layout { grid-template-columns: 1fr 300px; }
}

Cum folosești convertorul px ↔ rem

Setează mărimea de bază: font-size de pe html pentru rem (implicit 16px) sau al elementului părinte pentru em.
Alege direcția (px → rem/em sau invers), unitatea și numărul de zecimale.
Scrie o singură valoare ca să vezi rezultatul imediat sau dă clic pe o valoare din lista de valori uzuale ca s-o copiezi.
Pentru un fișier întreg, lipește CSS-ul în câmpul de conversie în bloc. Poți lăsa neschimbate 1px și 0px și poți sări rândurile cu @media. Conversia se face în browser; CSS-ul tău nu pleacă nicăieri.

Formula

rem = px ÷ mărimea de bază și px = rem × mărimea de bază. Cu baza 16px: 24px = 1.5rem, 14px = 0.875rem, 2rem = 32px.

/* înainte */
.card { padding: 24px 32px; font-size: 18px; border: 1px solid #e2e8f0; }

/* după (bază 16px, 1px lăsat neschimbat) */
.card { padding: 1.5rem 2rem; font-size: 1.125rem; border: 1px solid #e2e8f0; }

rem, em și de ce contează

rem se raportează la mărimea fontului de pe html. Dacă vizitatorul mărește textul din setările browserului, tot ce e în rem crește proporțional, ceea ce nu se întâmplă cu px. em se raportează la fontul elementului (pentru font-size, la al părintelui), așa că se adună când pui elemente unul în altul; e util pentru spațiere care crește odată cu textul unui buton.

Unele site-uri pun html { font-size: 62.5%; } ca 1rem să fie 10px și calculele să fie ușoare. În @media, rem și em se raportează la mărimea implicită a browserului, nu la font-size pus pe html, de aceea poți alege să nu convertești acele rânduri.

Întrebări frecvente

Convertesc și bordurile de 1px?

De obicei nu. O linie de 1px trebuie să rămână subțire la orice mărime a textului, iar 0.0625rem poate ieși mai neclar la unele niveluri de zoom.

Câte zecimale păstrez?

Patru zecimale sunt suficiente; browserul rotunjește oricum la fracțiuni de pixel.