em ve rem

em ve rem göreceli birimlerini öğrenirsin.

em birimi

em birimi yazı boyutuna görecelidir. Bir öğe için font-size: 1.5em yazarsan, tarayıcı ebeveyninin yazı boyutunu alır ve 1.5 ile çarpar.

em iç içe geçtikçe büyür: her düzey kendi ebeveynine göre yeniden hesaplanır. Bu yüzden iç içe menülerde dikkatli kullanmak gerekir; yoksa yazı beklenenden büyük olur.

rem birimi

rem (root em) her zaman html kök öğesinin yazı boyutuna göre hesaplanır. font-size: 1.25rem yazarsan, tarayıcı kök yazı boyutunu alır ve 1.25 ile çarpar.

em gibi iç içe büyümez; her rem değeri aynı köke bağlıdır. Bu yüzden düzenli ve tutarlı bir ölçek için rem tercih edilir.

em ve rem farkı

em ebeveynine, rem köke bağlıdır. İç içe geçmiş bir listede em her düzeyde biraz daha büyür; rem ise her düzeyde aynı kalır.

Bu yüzden genel tipografi için rem, bileşen içindeki küçük ölçeklemeler için em tercih edilir. İkisini birlikte kullanmak modern CSS'te yaygındır.

Uygulama Kök ve başlık için em ile rem

İki bildirim yaz: html seçicisine font-size: 16px, .heading seçicisine font-size: 1.5rem ve line-height: 1.2em ata.

Örnek çözümü göster

/* kök ve başlık biçimini ekle */
html {
  font-size: 16px;
}
.heading {
  font-size: 1.5rem;
  line-height: 1.2em;
}

Kendini test et

rem neyi referans alır?
```
/* rem köke sabitlenir */
```
- Ebeveynin yazı boyutunu
- Ekran genişliğini
- html kök öğesinin yazı boyutunu
- Görüntü alanı yüksekliğini
Cevabı göster

html kök öğesinin yazı boyutunu — Doğru. rem her zaman html kök yazı boyutunu referans alır; iç içe büyümez.

rem ile yazı boyutu

.heading {
  font-size: ____rem;
}

Cevabı göster

.heading {
  font-size: 1.5rem;
}

Birim-referans eşle

em

Ebeveyn yazı boyutu
rem

Kök yazı boyutu
px

Sabit piksel
vw

Görüntü alanı genişliği

Sıradaki ders: vw ve vh

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler