Vitengo vya rem katika CSS

Vitengo vya em sio rahisi kila wakati. Shida ni kwamba ukibadilisha ukubwa wa herufi kwa kitambulisho kimoja, basin itabadilika kwa vitambulisho vyote vinavyotokana navyo, vinavyokokotoa ukubwa wao kuhusiana nayo.

Kwa hiyo vitengo vya rem vilianzishwa. Thamani za vitengo hizi kila wakati hukokotolewa kuhusiana na ukubwa wa herufi uliowekwa kwa kitambulisho html.

Kama unavyojua tayari, kwa chaguo-msingi thamani hii ni sawa na 16px:

csshtml {
  font-size: 16px;
}

Wacha tuangalie kwa mfano. Hebu tuseme tuna vitambulisho kama hivi:

html<div>
  <p>
    maandishi
  </p>
</div>

Wacha tuweke viwango vyao katika rem:

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

html<main>
  <h1>kichwa</h1>
  <section>
    <h2>kichwa</h2>
    <p>
      maandishi
    </p>
    <p>
      maandishi
    </p>
  </section>
  <section>
    <h2>kichwa</h2>
    <p>
      maandishi
    </p>
    <p>
      maandishi
    </p>
  </section>
</main>

cssmain {
  margin: 64px auto 32px;
}

h1 {
  font-size: 32px;
}
section {
  font-size: 16px;
  margin-bottom: 32px;
}
h2 {
  font-size: 24px;
  margin-bottom: 32px;
}
p {
  font-size: 20px;
  margin-bottom: 12px;
}