Hiç masaüstünde gayet güzel görünen bir başlığın, telefonda minicik kalıp okunmaz hale geldiği oldu mu? Ya da mobilde tam güzel olan yazının, dev ekranda kocaman bir tabelaya dönüştüğünü gördün mü? İşte clamp() tam bu noktada imdada yetişiyor.
CSS clamp() Nedir?
Basitçe söylemek gerekirse clamp(), “en küçük şu olsun, ideal şu, en büyük de bu olsun” diye bir kural koymamızı sağlar.
Formülü şu şekilde:
clamp(minimum, ideal, maksimum)
- minimum: Yazının olabileceği en küçük boyut (px, rem vb.)
- ideal: Ekran boyutuna göre değişen değer (genelde
vw) - maksimum: Yazının çıkabileceği en büyük boyut
📌 Avantajı: Media query yazmadan, tek satırla responsive tipografi.
Basit Bir Örnek
h1 {
font-size: clamp(1rem, 2.5vw, 2rem);
}
Bu ne demek?
- Mobilde: En az 16px olsun
- Orta ekranlarda: Ekrana göre esnek olarak büyüsün
- Büyük ekranlarda: 32px’i geçmesin
Sonuç: Her cihazda dengeli görünen bir başlık.
Gelişmiş Kullanım
Mesela hem başlık hem paragraf boyutunu ayarlamak isteyebilirsin:
h1 {
font-size: clamp(1.5rem, 4vw, 3rem);
}
p {
font-size: clamp(1rem, 1.5vw, 1.25rem);
}
Böylece başlıklar büyük ekranlarda göz alıcı, küçük ekranlarda ise okunabilir kalır.
Tarayıcı Desteği
- Var: Chrome, Firefox, Edge, Safari
- Yok: Eski Internet Explorer
Son Söz
clamp() sadece font boyutunda değil, padding, margin gibi ölçülerde de çalışır.
Kodunu temiz tutar, media query sayısını azaltır ve her ekranda tasarımını dengede tutar.
