CSS'теги rem бирдиктери

em бирдиктери ар дайым ыңгайлуу эмес. Көйгөй шунда ки, эгерде бир тегдин шрифттин өлчөмүн өзгөртсөңүз, анда ал өзгөрүп, анын өз өлчөмүн ага салыштырмалуу эсептеп жаткан бардык тег-уулдарына таасир этет.

Ошон үчүн rem бирдиктери киргизилген. Бул бирдиктердин маанилери ар дайым html теги үчүн белгиленген шрифттин өлчөмүнө салыштырмалуу эсептелет.

Сиздер биле тургандай, демейки бул маани 16px барабар:

csshtml {
  font-size: 16px;
}

Келгиле, мисалда карап көрөлү. Бизде төмөнкүдөй тегдер бар деп коёлу:

html<div>
  <p>
    текст
  </p>
</div>

Келгиле, аларга rem бирдигинде өлчөмдөрүн белгилейли:

cssdiv {
  font-size: 2rem; /* 32px'га туура келет */
}
p {
  font-size: 2rem; /* 32px'га туура келет */
  margin: 2rem;    /* 32px'га туура келет */
}

html<main>
  <h1>баш аталыш</h1>
  <section>
    <h2>баш аталыш</h2>
    <p>
      текст
    </p>
    <p>
      текст
    </p>
  </section>
  <section>
    <h2>баш аталыш</h2>
    <p>
      текст
    </p>
    <p>
      текст
    </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;
}