Mikakati ya Matumizi ya em katika CSS

Wacha tuangalie msimbo kamili wa ukurasa wa HTML:

html<html>
  <head>
    <title></title>
  </head>
  <body>
    <main>
      <div>
        <p>
          maandishi
        </p>
      </div>
    </main>
  </body>
<html>

Kwa default, vitambulisho vyote vya ukurasa vna ukubwa fulani wa herufi. Kiukweli jambo ni kwamba, kitambulisho html kwa default kina ukubwa fulani wa herufi:

csshtml {
  font-size: 16px; /* thamani ya default */
}

Kwa hivyo tunaweza kubainisha vitambulisho vya ukurasa vipimo kwa em. Wakati huo huo, zitahesabu vipimo vyake kuhusiana na wazazi wa karibu wa karibu.

Kwa mfano, wacha tubainishe ukubwa wa herufi kwa kitambulisho main:

cssmain {
  font-size: 1.5em; /* inafanana na 24px */
}

Sasa tuweke ukubwa wa herufi kwa kitambulisho div:

cssdiv {
  font-size: 2em; /* inafanana na 48px */
}

html<main>
  <h1>kichwa</h1>
  <div>
    <p>
      maandishi
    </p>
    <p>
      maandishi
    </p>
  </div>
  <div>
    <p>
      maandishi
    </p>
    <p>
      maandishi
    </p>
  </div>
</main>

cssmain {
  margin: 16px auto;
}

h1 {
  font-size: 32px;
}
p {
  font-size: 32px;
}

cssmain {
  margin: 32px auto;
}

h1 {
  font-size: 32px;
}
div {
  font-size: 16px;
  margin-bottom: 32px;
}
p {
  font-size: 20px;
}