REM jedinice u CSS-u

Em jedinice nisu uvek praktične. Problem je u tome što, ako promenite veličinu fonta jednom tegu, ona će se promeniti i svim njegovim potomcima, koji računaju svoju veličinu u odnosu na njega.

Zbog toga su uvedene rem jedinice. Vrednosti ovih jedinica se uvek računaju u odnosu na veličinu fonta postavljenu za teg html.

Kao što već znate, podrazumevana vrednost je 16px:

csshtml {
  font-size: 16px;
}

Pogledajmo na primeru. Pretpostavimo da imamo ove tegove:

html<div>
  <p>
    tekst
  </p>
</div>

Hajde da im postavimo veličine u rem:

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

Задание 1

Pretpostavimo da imamo HTML kod, za koji ćemo rešavati zadatke:

html<main>
  <h1>zaglavlje</h1>
  <section>
    <h2>zaglavlje</h2>
    <p>
      tekst
    </p>
    <p>
      tekst
    </p>
  </section>
  <section>
    <h2>zaglavlje</h2>
    <p>
      tekst
    </p>
    <p>
      tekst
    </p>
  </section>
</main>

Prepišite u rem sve jedinice koje su zadate u pikselima:

cssmain {
  margin: 4rem auto 2rem; /* 64px / 16px = 4rem, 32px / 16px = 2rem */
}

h1 {
  font-size: 2rem; /* 32px / 16px = 2rem */
}
section {
  font-size: 1rem; /* 16px / 16px = 1rem */
  margin-bottom: 2rem; /* 32px / 16px = 2rem */
}
h2 {
  font-size: 1.5rem; /* 24px / 16px = 1.5rem */
  margin-bottom: 2rem; /* 32px / 16px = 2rem */
}
p {
  font-size: 1.25rem; /* 20px / 16px = 1.25rem */
  margin-bottom: 0.75rem; /* 12px / 16px = 0.75rem */
}