Unități rem în CSS

Unitățile em nu sunt întotdeauna convenabile. Problema este că dacă schimbi dimensiunea fontului unui tag, atunci se va schimba și pentru toate tag-urile descendente ale sale, care își calculează dimensiunea relativ la acesta.

De aceea au fost introduse unitățile rem. Valorile acestor unități sunt întotdeauna calculate relativ la dimensiunea fontului, setată pentru tag-ul html.

După cum știți deja, în mod implicit această valoare este egală cu 16px:

csshtml {
  font-size: 16px;
}

Să privim un exemplu. Să presupunem că avem următoarele tag-uri:

html<div>
  <p>
    text
  </p>
</div>

Să le setăm dimensiunile în rem:

cssdiv {
  font-size: 2rem; /* corespunde la 32px */
}
p {
  font-size: 2rem; /* corespunde la 32px */
  margin: 2rem;    /* corespunde la 32px */
}

html<main>
  <h1>header</h1>
  <section>
    <h2>header</h2>
    <p>
      text
    </p>
    <p>
      text
    </p>
  </section>
  <section>
    <h2>header</h2>
    <p>
      text
    </p>
    <p>
      text
    </p>
  </section>
</main>

cssmain {
  margin: 4rem auto 2rem;
}

h1 {
  font-size: 2rem;
}
section {
  font-size: 1rem;
  margin-bottom: 2rem;
}
h2 {
  font-size: 1.5rem;
  margin-bottom: 2rem;
}
p {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}