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