Ö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); }