Middle+

Rem ile em arasındaki fark nedir?

sobes.tech yapay zeka

AI'dan gelen yanıt

rem ve em, CSS'te boyutları belirlemek için kullanılan göreceli ölçü birimleridir, ancak referans tabanları farklıdır.

em — ebeveyn öğenin font boyutuna dayalı göreceli bir birimdir. Örneğin, ebeveynin font boyutu: 16px ise, 1em = 16px. Bir çocuk öğenin font boyutu: 1.5em ise, boyutu 24px olur.
rem — kök öğenin (genellikle <html>) font boyutuna dayalı göreceli bir birimdir. Örneğin, <html>'in font boyutu: 16px ise, 1rem her zaman 16px'e eşittir, iç içe geçme durumu fark etmez.

Ana fark:

em, bağlama (kontekste) bağlıdır (ebeveyn), bu da iç içe geçerken boyutların zincirleme çarpımına yol açabilir.
rem ise her zaman köke göre sabittir, bu da boyutların yönetimini kolaylaştırır ve daha öngörülebilir hale getirir.

Örnek:

html {
  font-size: 16px;
}

.parent {
  font-size: 20px; /* 1em = 20px .parent içinde */
}

.child-em {
  font-size: 1.5em; /* 1.5 * 20px = 30px */
}

.child-rem {
  font-size: 1.5rem; /* 1.5 * 16px = 24px */
}

Küresel boyutlar için rem kullanın, beklenmedik değişiklikleri önlemek için, ve em kullanın, yerel bağlama göre ölçeklendirme gerektiğinde.

Önceki Sonraki