Rem egységek a CSS-ben

A em egységek nem mindig kényelmesek. A probléma az, hogy ha megváltoztatjuk egy elem betűméretét, akkor az megváltozik az összes leszármazott elem számára is, amelyek a méretüket ehhez viszonyítják.

Ezért vezették be a rem egységeket. Ezeknek az egységeknek az értéke mindig a html elemre beállított betűmérethez viszonyítva számítódik ki.

Mint azt már tudod, alapértelmezetten ez az érték 16px:

csshtml {
  font-size: 16px;
}

Nézzünk egy példát. Tegyük fel, hogy a következő elemek vannak:

html<div>
  <p>
    szöveg
  </p>
</div>

Állítsuk be a méreteiket rem egységben:

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

html<main>
  <h1>fejléc</h1>
  <section>
    <h2>fejléc</h2>
    <p>
      szöveg
    </p>
    <p>
      szöveg
    </p>
  </section>
  <section>
    <h2>fejléc</h2>
    <p>
      szöveg
    </p>
    <p>
      szöveg
    </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;
}