CSS clamp() Fonksiyonu

Tanımı ve Kullanımı

CSS'nin clamp() Fonksiyon, bir değeri belirler ve bu değer, ekran genişliğine göre en küçük ve en büyük değer arasında otomatik olarak ayarlanır.

clamp() Fonksiyon üç parametre içerir: en küçük değer, tercih edilen değer ve en büyük değer. Tercih edilen değer belirtilen aralık içindeyse, tarayıcı tercih edilen değeri seçer; aksi takdirde, tarayıcı en küçük veya en büyük değeri seçer.

Örnek

<h1> ögesinin en küçük yazı boyutunu 2rem, en büyük yazı boyutunu 3.5rem olarak ayarlayın. Aynı zamanda, <p> ögesinin en küçük yazı boyutunu 1rem, en büyük yazı boyutunu 2.5rem olarak ayarlayın:

h1 {
  font-size: clamp(2rem, 2.5vw, 3.5rem);
}
p {
  font-size: clamp(1rem, 2.5vw, 2.5rem);
}

Kişisel Deneyim

CSS Grammar

clamp(min, preferred, max)

Teknik Açıklamalar

Tarayıcı Desteği

Tablo içindeki rakamlar, bu fonksiyonu tamamen destekleyen ilk tarayıcı sürümünü gösterir.