CSS-däki rem ölçeg birlikleri

em ölçeg birlikleri elmydama amatly däl. Meselä, eger bir teg üçin ýazgy ululygyny üýtgetseňiz, onda ol öz ululygyny onuň ýazgy ululygyna görä hasaplaýan ähli waryslaryna hem üýtgerer.

Şonuň üçin rem ölçeg birlikleri girizildi. Bu ölçeg birlikleriniň bahalary hemme wagt html tegine kesgitlenen ýazgy ululygyna görä hasaplanýar.

Bildigiňiz ýaly, deslapky bahasy 16px deň:

csshtml {
  font-size: 16px;
}

Geliň mysal bilen göreli. Bizde şeýle tegler bar bolsun:

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

Geliň olara rem birliklerinde ölçegleri görkezeliň:

cssdiv {
  font-size: 2rem; /* 32px gabat gelýär */
}
p {
  font-size: 2rem; /* 32px gabat gelýär */
  margin: 2rem;    /* 32px gabat gelýär */
}

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