Rem-enheter i CSS

em-enheter er ikke alltid praktiske. Problemet er at hvis du endrer skriftstørrelsen til ett element, vil den også endres for alle dets barnelementer, som beregner sin størrelse i forhold til det.

Derfor ble rem-enheter introdusert. Verdiene for disse enhetene beregnes alltid i forhold til skriftstørrelsen satt for html-elementet.

Som du allerede vet, er standardverdien 16px:

csshtml {
  font-size: 16px;
}

La oss se på et eksempel. Anta at vi har følgende elementer:

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

La oss sette størrelsene deres i rem:

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

html<main>
  <h1>overskrift</h1>
  <section>
    <h2>overskrift</h2>
    <p>
      tekst
    </p>
    <p>
      tekst
    </p>
  </section>
  <section>
    <h2>overskrift</h2>
    <p>
      tekst
    </p>
    <p>
      tekst
    </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;
}