Enote rem v CSS

Enote em niso vedno priročne. Težava je v tem, da če spremenite velikost pisave enemu oznaki, se bo spremenila tudi vsem njegovim podrejenim oznakam, ki izračunajo svojo velikost glede nanj.

Zato so bile uvedene enote rem. Vrednosti teh enot so vedno izračunane glede na velikost pisave, določeno za oznako html.

Kot že veste, je privzeta vrednost enaka 16px:

csshtml {
  font-size: 16px;
}

Poglejmo si na primeru. Recimo, da imamo takšne oznake:

html<div>
  <p>
    besedilo
  </p>
</div>

Določimo jim velikosti v rem:

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

html<main>
  <h1>glava</h1>
  <section>
    <h2>glava</h2>
    <p>
      besedilo
    </p>
    <p>
      besedilo
    </p>
  </section>
  <section>
    <h2>glava</h2>
    <p>
      besedilo
    </p>
    <p>
      besedilo
    </p>
  </section>
</main>

cssmain {
  margin: 64px auto 32px;
}

h1 {
  font-size: 32px;
}
section {
  font-size: 16px;
  margin-bottom: 32px;
}
h2 {
  font-size: 24px;
  margin-bottom: 32px;
}
p {
  font-size: 20px;
  margin-bottom: 12px;
}