Rem-enheter i CSS

em-enheter är inte alltid bekväma. Problemet är att om man ändrar teckenstorleken för ett element kommer det också att ändras för alla dess barn-element, som beräknar sin storlek i förhållande till det.

Därför introducerades rem-enheter. Värdena för dessa enheter beräknas alltid i förhållande till teckenstorleken som anges för html-elementet.

Som du redan vet är standardvärdet 16px:

csshtml {
  font-size: 16px;
}

Låt oss titta på ett exempel. Antag att vi har följande element:

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

Låt oss ange deras storlekar i rem:

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

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