Nasıl kullanılır?
- Özellik seçin, En küçük boyut ve En büyük boyut değerlerini yazın, ardından Boyutların birimi alanından birimi seçin.
- Boyutun en küçük olduğu ekran genişliği ve Boyutun en büyük olduğu ekran genişliği alanlarına iki genişliği yazın ve birimlerini seçin.
- Herhangi bir yerde rem kullandıysanız Kök yazı boyutu (px) alanını kontrol edin. Site başka bir boyut belirlemediyse tarayıcılar 16 px kullanır.
- CSS tanımı satırını kopyalayın ya da her genişlikteki sonucu görmek için Hesap adımları ve Yaygın genişliklerde boyut tablosuna bakın.
clamp() boyutu nasıl akışkan yapar?
clamp(MIN, VAL, MAX) bir en küçük değer, bir tercih edilen değer ve bir en büyük değer alır. CSS Values and Units belirtimi bunun tam olarak max(MIN, min(VAL, MAX)) ile aynı değeri temsil ettiğini söyler. Boyut bu yüzden MIN'in altına inmez, MAX'in üstüne çıkmaz; aradaysa ekran genişliğine bağlı bir doğruyu izler.
Doğru, en küçük ekran genişliğinde en küçük boyuttan başlar ve en büyük ekran genişliğinde en büyük boyuta ulaşır. Bu iki genişliğin dışında boyut sabit kalır.
eğim = (en büyük boyut - en küçük boyut) / (en büyük genişlik - en küçük genişlik); kesişim = en küçük boyut - eğim x en küçük genişlik; tercih edilen değer = kesişim + eğim x 100vwEğim, kesişim ve vw terimi
Eğim, ekran genişliğinin her piksel artışında boyutun ne kadar büyüdüğünü gösterir. Kesişim ise aynı doğrunun ekran genişliği sıfır olduğunda vardığı yerdir. Bir vw birimi ekran genişliğinin yüzde birine eşittir; eğim 100 ile çarpılınca pencereyi izleyen terim elde edilir.
Eğim bulunmadan önce iki ekran genişliği ve iki boyut piksele çevrilir. Bir rem değeri kök yazı boyutuyla çarpılır; kök 16 px ise aynı tasarım rem ya da px ile yazıldığında aynı sonucu verir.
- En büyük boyutu en küçük boyuttan küçük tutmayın. Araç küçük bir en büyük boyutu reddeder, çünkü böyle bir doğru ekran büyüdükçe küçülür.
- Bir vw terimi ziyaretçinin metin boyutu ayarını izlemez, ama rem cinsinden kesişim izler. Sayfayı yüzde 200 yakınlaştırma ile deneyin ve mümkünse kesişimi rem cinsinden tutun.
Örnek: 16 px'den 24 px'e büyüyen bir yazı
320 px genişliğindeki bir ekran ile 1200 px genişliğindeki bir ekran arasında yazı 16 px'den 24 px'e büyür. Eğim (24 - 16) / (1200 - 320) = 8 / 880 olur; dört ondalıkla 0,0091 eder. Kesişim 16 - 0,0091 x 320 = 13,0909 px, vw terimi ise 0,9091 vw'dir.
Değer clamp(16px, 13.0909px + 0.9091vw, 24px) olur; CSS tanımı font-size: clamp(16px, 13.0909px + 0.9091vw, 24px); şeklindedir. Rem birimiyle, 20rem ile 75rem arasında 1rem'den 1.5rem'e ve 16 px kök ile clamp(1rem, 0.8182rem + 0.9091vw, 1.5rem) elde edilir.
Sık sorulan sorular
Ekran en küçük genişlikten dar olduğunda boyut ne olur?
Boyut en küçük boyutta kalır. clamp() formülü değeri en küçük sınırının altına indirmez, bu yüzden yazı en dar genişlik için belirlediğiniz boyutu korur.
Ekran genişliği kısmı neden vw ile yazılır?
Bir vw birimi ekran genişliğinin yüzde birine eşittir; bu yüzden tarayıcı penceresi büyüdükçe değişir. Piksel ya da rem değeri pencereyle değişmez ve boyut onu izleyemezdi.
Kod neden bazen vw kısmını önce yazıyor?
Kesişim negatif olduğunda kod önce vw kısmını yazar ve kesişimi çıkarır; bu daha okunaklıdır. İki biçim de aynı değeri verir.
Değeri iç boşluk, dış boşluk ya da aralık için kullanabilir miyim?
Evet. Özellik alanından iç boşluk, dış boşluk ya da aralığı seçin. Aynı doğru her uzunluk için çalışır; böylece boşluk da yazı boyutu gibi ekranla birlikte büyür.
Hangi tarayıcılar clamp() destekler?
Güncel tüm büyük tarayıcılar clamp() destekler. Ziyaretçileriniz eski sürümleri kullanıyorsa akışkan boyuta güvenmeden önce sayfayı o sürümlerde deneyin.
Girdiğim bilgiler saklanıyor ya da bir sunucuya gönderiliyor mu?
Hayır. Değer tarayıcınızda hesaplanır; yazdığınız hiçbir şey saklanmaz ya da sunucumuza gönderilmez. Sayfadan ayrılmadan önce tanımı kopyalayın.
Kaynaklar
- W3C: CSS Values and Units Level 4, clamp() (İngilizce)
- W3C: CSS Values and Units Level 4, viewport birimleri (İngilizce)
- MDN: clamp() (İngilizce)
Rakamlar ve metin en son 10 Kasım 2026 Salı tarihinde kontrol edildi.