em өлчөм бирдиктери менен rem өлчөм бирдиктери кандай айырмаланат?

em бирдиктери ата-эне элементинин шрифтинин өлчөмүнө салыштырмалуу. Эгер ата-эне элементинин шрифтинин өлчөмү ачык көрсөтүлбөсө, анда анын өзүнүн ата-эне элементинин шрифтинин өлчөмү колдонулат жана ошондой эле улантылат, тамыр элементине (html) чейин.

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

Мисал:

HTML:

<div class="parent">
  Ата-эне тексті
  <div class="child-em">
    Баланын em тексті
  </div>
  <div class="child-rem">
    Баланын rem тексті
  </div>
</div>

CSS:

.parent {
  font-size: 16px; /* Ата-эне үчүн негизги шрифт өлчөмү */
}

.child-em {
  font-size: 1.5em; /* Шрифт өлчөмү 1.5 * 16px = 24px */
}

html {
  font-size: 10px; /* Тамыр элемент үчүн негизги шрифт өлчөмү */
}

.child-rem {
  font-size: 2rem; /* Шрифт өлчөмү 2 * 10px = 20px */
}

Салыштыруу таблицасы:

Бирдик	Ненин салыштырмалуу өлчөмү	Алдын ала болжауучулук	Колдонуу
em	Ата-эне элементинин шрифтинин өлчөмү	Азырынча алдын ала болжау кыйын, контекстке көз каранды	Ички текстке байланыштуу аралыктар жана өлчөмдөр үчүн
rem	Тамыр элементинин (html) шрифтинин өлчөмү	Адатта алдын ала болжауучулук	Барактагы глобалдуу шрифттер, аралыктар жана өлчөмдөр үчүн