CSS-i rem ühikud

em ühikud ei ole alati mugavad. Probleem on selles, et kui muuta fondi suurust ühele sildile, siis muutub see ka kõigile selle järglassiltidele, mis arvutavad oma suuruse selle suhtes.

Seetõttu võeti kasutusele rem ühikud. Nende ühikute väärtused arvutatakse alati html sildile määratud fondi suuruse suhtes.

Nagu te juba teate, on see vaikeväärtus võrdne 16px-ga:

csshtml {
  font-size: 16px;
}

Vaatame näidet. Oletame, et meil on järgmised sildid:

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

Määrame neile suurused rem-ides:

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