CSS clamp() Oluşturucu

Bu araç ne işe yarar?

CSS clamp() Üretici, medya sorgusu yazmadan akıcı ve duyarlı yazı tipi boyutları ile boşluklar oluşturmanızı sağlar. Minimum boyut, maksimum boyut ve görünüm alanı (viewport) aralığını belirlersiniz; araç bunları tek satırlık bir clamp() değerine dönüştürür. Mobil ve masaüstü arasında pürüzsüz ölçeklenen tipografi isteyen frontend geliştiricileri için idealdir.

Nasıl kullanılır?

Değerleri ve seçenekleri ayarlayın.
Canlı önizlemede sonucu görün.
Üretilen CSS/kodu projenize kopyalayın.

Nasıl çalışır?

Belirlediğiniz minimum ve maksimum boyutu, iki viewport genişliği arasında doğrusal olarak enterpolasyona tabi tutarak ortadaki tercih edilen değeri hesaplar. Sonuç clamp(min, preferred, max) biçimindedir; örneğin clamp(1rem, 0.5rem + 2vw, 2rem). Böylece tek bir CSS satırı, ekran küçüldükçe yazıyı küçültür, büyüdükçe büyütür ve sınırların dışına asla taşmaz.

Yaygın kullanım alanları

Başlıkları (h1, h2) farklı ekranlarda orantılı tutmak, bölüm aralarındaki boşlukları (padding, margin, gap) duyarlı hale getirmek ve buton ile kart bileşenlerini esnek ölçeklendirmek için kullanılır. Özellikle media query yığınlarından kurtulmak isteyen tasarım sistemlerinde çok değerlidir.

Sıkça sorulan sorular

clamp() içindeki tercih edilen değer neden vw ve rem karışımı içeriyor?

rem kısmı bir taban değer sağlar ve kullanıcı yakınlaştırma yaptığında erişilebilirliği korur; vw kısmı ise viewport ile orantılı büyümeyi sağlar. Bu ikisinin toplamı, hem ölçeklenebilir hem de erişilebilir akıcı bir boyut verir.

Negatif veya çok küçük viewport aralıkları girersem ne olur?

Eğer minimum viewport ile maksimum viewport çok yakınsa eğim çok dikleşir ve geçiş ani olur. En iyi sonuç için mobil (ör. 320px) ile masaüstü (ör. 1280px) arasında geniş bir aralık seçin.