TR

CSS clamp hesaplayıcı

Bu CSS clamp hesaplayıcıyla en küçük ve en büyük değeri ile viewport aralığını girerek yazı boyutu, boşluk ve genişlik için hazır clamp() ifadesini media query kullanmadan elde edersiniz.

Örnek: CSS özelliği: font-size · En küçük değer (mobil) 16 px · En büyük değer (masaüstü) 24 px · Şu viewport genişliğinden 320 px · Şu viewport genişliğine kadar 1.280 px · Temel yazı boyutu (rem) 16 px → CSS: font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);. Kaynak: MDN – CSS clamp(): clamp(MIN, VAL, MAX). Güncelleme: .

px
px
px
px
px
16 px
AraçlarımGirdileriniz yalnızca bu tarayıcıda saklanır.

Sonuç

CSS
font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);
Yaygın viewport genişliklerinde değer
Viewport genişliğipx cinsinden değerrem cinsinden değer
320 px16 px1 rem
375 px16,46 px1,029 rem
768 px19,73 px1,233 rem
1024 px21,87 px1,367 rem
1280 px24 px1,5 rem
1920 px24 px1,5 rem
Aradaki bölgede değer, viewport genişliğinin her 1 vw'si başına 0,8333 vw doğrusal artar.

Nasıl hesaplanır?

clamp(MIN, DEĞER, MAX) bir değeri aşağıdan ve yukarıdan sınırlar. 320 px ile 1280 px viewport genişliği arasında 16 px'ten 24 px'e büyüyen bir yazı için şöyle olur: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem).

Nasıl hesaplanır

İki viewport genişliği arasında değer doğrusal artar. Eğim (maks − min) / (viewportmaks − viewportmin), kesişim ise min − eğim · viewportmin'dir. Kesişim rem, eğim vw olarak yazılır; böylece kullanıcının büyüttüğü tarayıcı yazı boyutu hesaba katılmaya devam eder. Tablo, tipik cihazlarda ortaya çıkan değeri gösterir.

Bilmekte fayda var

Sıkça sorulan sorular

Yazı boyutu için clamp() nasıl hesaplanır?

px cinsinden en küçük ve en büyük boyutu ile viewport genişliklerini girin. Hesaplayıcı rem ve vw'den tercih edilen değeri oluşturup en küçük ile en büyük arasına yerleştirir.

İfadede neden rem payı var?

Yalnızca vw cinsinden bir değer, tarayıcının yazı boyutunu yok sayar. rem payı sayesinde daha büyük varsayılan yazı kullananlar için metin ölçeklenmeye devam eder.

clamp()'i boşluklar için de kullanabilir miyim?

Evet; padding, margin, gap veya width gibi uzunluk değeri alan her CSS özelliği için.

Sondaki 1.5rem ne anlama gelir?

En büyük değerdir: üst viewport genişliğinden sonra yazı büyümez. 16 px tabanda 1,5 rem tam 24 px eder.

Kaynaklar ve yasal dayanak

Güncelleme: · Editoryal ilkeler

Benzer araçlar