CSS clamp() Hesaplayıcı
Küçük ve büyük ekranlar için bir boyut girin ve yazı boyutları, padding, margin veya gap değerleri için aralarında sorunsuz bir şekilde ölçeklenen akıcı bir clamp() değeri elde edin.
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)Sonuç, orta terimde bir rem parçası tutar, böylece birisi %200 yakınlaştırma yaptığında metin büyümeye devam eder — yalnızca viewport (görünüm alanı) tabanlı bir değer bunu yapamazdı.
Tam kıvamında ölçeklenen akıcı metin.
Hesaplama tamamen tarayıcınızda çalışır. Buraya girdiğiniz hiçbir şey BroBroGo sunucularına yüklenmez.
SSS
Hesaplayıcı clamp() değerini nasıl oluşturur?
Hesaplayıcıya iki nokta verirsiniz: küçük bir ekran genişliğindeki boyut ve büyük bir ekran genişliğindeki boyut. Araç, ekran genişledikçe boyutun sorunsuz bir şekilde büyümesi için aralarında düz bir çizgi çizer, ardından bunu clamp() içine sarar; böylece değer asla küçük ekran boyutunuzun altına düşmez veya büyük ekran boyutunuzun üzerine çıkmaz. İki genişlik arasında boyut akıcı bir şekilde ölçeklenir; bu sınırların dışındaysa en yakın limite sabitlenir.
Sonuç neden piksel yerine rem ve vw cinsinden?
Sınırlar rem cinsindendir ve değişen orta kısım bir rem bileşeni barındırır; böylece bir okuyucu yakınlaştırma yaptığında veya tarayıcısının varsayılan yazı boyutunu büyüttüğünde metin hala büyür — sadece piksel veya viewport tabanlı bir değer bunu engelleyebilir. Çoğu insan boyutları bu şekilde düşündüğü için piksel cinsinden yazarsınız ve araç, kök yazı boyutunuzu kullanarak bunu rem'e dönüştürür.
Bunu sadece yazı boyutu için değil, boşluklar için de kullanabilir miyim?
Evet. Aynı değer padding, margin, gap, width veya height gibi uzunluk birimi kullanılan her yerde çalışır. Yazı boyutu yerine boşlukların büyümesini izlemek için önizlemeyi Kutu (Box) moduna getirin. Küçük ve büyük boyutlarınız aynıysa, ölçeklenecek bir şey olmadığından sonuç düz bir sabit uzunluğa indirgenir.
Tüm tarayıcılar clamp() fonksiyonunu destekliyor mu?
Evet — 2020'den beri tüm modern tarayıcılar clamp() fonksiyonunu desteklemektedir, bu nedenle değeri herhangi bir fallback (yedek kod) olmadan doğrudan kullanabilirsiniz. Çok büyük bir maksimum değerde veya hızlı bir değişim oranında, metnin ihtiyacı olan okuyucular için %200 yakınlaştırmada hala büyüyüp büyümediğini hızlıca kontrol etmekte fayda vardır.