Özet - Duyarlı tipografi

Birimleri kullanarak duyarlı tipografi kurarsın.

Birimleri birleştir

Duyarlı tipografi, yazı boyutunun ekranla birlikte akışkan biçimde değişmesidir. Bunun için rem, vw ve calc() birlikte kullanılır.

Temel ilke: rem ile alt sınır, vw ile ekranla büyüme, calc() ile ikisini birleştirme. Böylece başlık dar ekanda okunabilir, geniş ekranda etkileyici kalır.

Uygulama clamp() ile duyarlı başlık

Bir h1 seçicisi yaz. Yazı boyutunu clamp(1.5rem, 4vw, 3rem) olarak ata. clamp() en küçük, tercih edilen ve en büyük değeri sırayla alır.

Örnek çözümü göster

/* akıcı başlık ekle */
h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

Uygulama calc() ile akıcı paragraf

Bir p seçicisi yaz. Yazı boyutunu calc(1rem + 0.5vw) ve satır yüksekliğini 1.6 olarak ata.

Örnek çözümü göster

/* akıcı paragraf ekle */
p {
  font-size: calc(1rem + 0.5vw);
  line-height: 1.6;
}

Kendini test et

Akıcı tipografide hangisi kullanışlıdır?
```
/* sabit + ekran birimi birlikte */
```
- Yalnızca px
- rem ile vw birlikte
- Yalnızca em
- Yalnızca pt
Cevabı göster

rem ile vw birlikte — Doğru. rem alt sınır verir, vw ekranla büyüme katar; birlikte akıcı olur.

calc ile akıcı başlık

h1 {
  font-size: calc(1rem + ____vw);
}

Cevabı göster

h1 {
  font-size: calc(1rem + 2vw);
}

Sıradaki ders: Display özelliği

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler