Duyarlı tipografi
clamp() ve vw birimleriyle duyarlı tipografiyi öğrenirsin.
vw birimi nedir?
vw (viewport width), görünüm alanı genişliğinin yüzde biridir. 1vw = görünüm alanı genişliğinin %1'i. 1200px genişlikte bir ekran için 1vw = 12px olur.
Yazı boyutu için kullanıldığında, ekran daraldıkça yazı da küçülür:
h1 { font-size: 5vw; }Tek başına vw kullanmak risklidir: çok dar ekranlarda yazı okunamayacak kadar küçülür, çok geniş ekranlarda çok büyür.
clamp() işlevi
clamp(), üç değer alır: clamp(min, tercih, max). Tarayıcı, tercih edilen değeri kullanır; ancak bu değer min'in altına düşemez ve max'ın üstüne çıkamaz.
h1 {
font-size: clamp(1.5rem, 4vw, 3rem);
}Bu örnekte yazı 4vw oranında değişir ama hiçbir zaman 1.5rem'in altına inmez ya da 3rem'in üstüne çıkmaz. vw'nin uç davranışlarını düzeltir.
Duyarlı yazı stratejisi
Duyarlı tipografinin yaygın reçeti: clamp(min, vw, max). Min, telefonda okunabilir alt sınır; max, geniş ekranda abartısız üst sınır; vw, ikisinin arasında akışkan geçiş.
Örnek: clamp(1rem, 2.5vw, 1.5rem). Telefonda 1rem, masaüstünde 1.5rem, arada akışkan. rem tabanlı sınırlar erişilebilirliği (kullanıcının tarayıcı yazı boyutu ayarını) korur.
Uygulama h1 için clamp ile duyarlı yazı
h1 seçicisine font-size: clamp(2rem, 5vw, 4rem) bildirimini ekle. Yazı, 2rem ile 4rem arasında 5vw oranında akışkan değişmeli.
Örnek çözümü göster
/* h1 için akışkan ama sınırlı yazı boyutu */
h1 {
font-size: clamp(2rem, 5vw, 4rem);
}Kendini test et
-
800px genişlikte 5vw kaç px olur?
- 5px
- 8px
- 40px
- 400px
Cevabı göster
40px — Doğru. 800 × 0,05 = 40px. 5vw, 800px genişliğin %5'idir.
-
clamp() çağrısını tamamla
h1 { font-size: clamp(1.5rem, ____, 3rem); }Cevabı göster
h1 { font-size: clamp(1.5rem, 4vw, 3rem); } -
clamp() neyi çözüyor?
- Yazı tipini değiştirir
- Saf vw'nin çok küçük veya çok büyük yazıya kaymasını engeller
- Sayfaya yakınlaştırmayı kapatır
- Renkleri duyarlı yapar
Cevabı göster
Saf vw'nin çok küçük veya çok büyük yazıya kaymasını engeller — Doğru. clamp(), vw'nin uç değerlerini min ve max ile sınırlandırır.