Jednotky rem v CSS

Jednotky em nejsou vždy pohodlné. Problém spočívá v tom, že pokud změníte velikost písma jednomu prvku, změní se i všem jeho potomkům, kteří vypočítávají svou velikost relativně k němu.

Proto byly zavedeny jednotky rem. Hodnoty těchto jednotek se vždy vypočítávají relativně k velikosti písma nastavené pro prvek html.

Jak již víte, výchozí hodnota je 16px:

csshtml {
  font-size: 16px;
}

Podívejme se na příklad. Předpokládejme, že máme následující prvky:

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

Nastavme jim velikosti v rem:

cssdiv {
  font-size: 2rem; /* odpovídá 32px */
}
p {
  font-size: 2rem; /* odpovídá 32px */
  margin: 2rem;    /* odpovídá 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;
}