em ölçü vahidləri ilə rem ölçü vahidləri arasındakı fərq nədir?

em vahidləri valide elementin valide ölçüsünə nisbətəndir. Əgər valide elementin ölçüsü açıq şəkildə təyin edilməyibsə, onun öz valide elementinin ölçüsü istifadə olunur və bu, kök elementə (html) qədər davam edir.

rem vahidləri isə yalnız kök elementin (html) ölçüsünə nisbətəndir. Bu, onları daha proqnozlaşdırıla bilən edir və səhifədəki şriftlər və ölçülərin idarə olunmasını sadələşdirir.

Nümunə:

HTML:

<div class="parent">
  Valideyn mətn
  <div class="child-em">
    Uşaq em mətn
  </div>
  <div class="child-rem">
    Uşaq rem mətn
  </div>
</div>

CSS:

.parent {
  font-size: 16px; /* Valideyn üçün əsas şrift ölçüsü */
}

.child-em {
  font-size: 1.5em; /* Şrift ölçüsü 1.5 * 16px = 24px */
}

html {
  font-size: 10px; /* Kök element üçün əsas şrift ölçüsü */
}

.child-rem {
  font-size: 2rem; /* Şrift ölçüsü 2 * 10px = 20px */
}

Müqayisəli cədvəl:

Vahid	Nə ilə müqayisədə ölçülür	Proqnozlaşdırıla bilməlik	İstifadə
em	Valideyn elementin şrift ölçüsü	Daha az proqnozlaşdırıla bilən, kontekstdən asılıdır	İçəridəki mətnə bağlı boşluqlar və ölçülər üçün
rem	Kök element (html) şrift ölçüsü	Daha proqnozlaşdırıla bilən	Səhifədə şriftlərin, boşluqların və ölçülərin qlobal miqyasda artırılması üçün