6XC

Akışkan Tipografi Hesaplama — CSS clamp()

Yazı boyutunu iki ekran genişliği arasında akıcı büyüten CSS clamp() üretin — breakpoint gerekmez.

749 görüntülenme

CSS —

Canlı önizleme (pencereyi daralt/genişlet):

Almost before we knew it, we had left the ground.

clamp() Tarifi

Akışkan tipografi, küçük ekrandaki minimum ile büyük ekrandaki maksimum arasında doğrusal geçiş yapar: eğim = (maks−min punto) ÷ (maks−min ekran), sonra font-size: clamp(minRem, kesişimRem + eğim·100vw, maksRem). 375→1280 px ekran arasında 16→24 px için sonuç clamp(1rem, 0.793rem + 0.884vw, 1.5rem) — 375'te tam 16, 1280'de tam 24 px, arada akıcı, dışında sabit.

Tercih edilen değerdeki rem parçası erişilebilirlik için kritiktir: salt vw'li formül kullanıcının tarayıcı yazı boyutu ayarını tamamen yok sayar; rem kesişimi zoom ve büyük yazı tercihlerini çalışır tutar. Bu araç her zaman karma formu üretir.

Sıkça Sorulan Sorular

Hangi ekran aralığını kullanmalıyım?

375 px (yaygın telefon) ile içerik maksimum genişliğiniz — çoğu sitede 1200-1440 px. Aralığın dışında clamp() min/maks değerde donar; saatte de ultrawide'da da bir şey bozulmaz.

Boşluklar için de kullanabilir miyim?

Evet — aynı matematik padding, margin ve gap için de çalışır. Min/maks boşluk değerlerinizle üretip clamp()'ı bir CSS değişkenine koyun.

Telefonumda yazı neden tam minimum boyutta değil?

Gerçek CSS ekran genişliğine bakın (cihaz pikseli ÷ DPR). "390 px" bir telefon 375'lik aralık başından geniştir; boyut bilerek minimumun hafif üstündedir.

Benzer Araçlar

CSS Gradient Oluşturucu Doğrusal, dairesel ve konik CSS degradelerini canlı önizlemeyle tasarlayın, kodu kopyalayın. Oluştur CSS Box Shadow (Gölge) Oluşturucu Kutu gölgesini görsel olarak tasarlayın — kaydırma, bulanıklık, yayılma, renk, opaklık ve inset — canlı önizlemeli. Oluştur CSS Border Radius Oluşturucu Köşeleri tek tek veya hep birlikte, px ya da % olarak yuvarlayın — canlı önizleme ve kopyalanabilir CSS. Oluştur CSS Text Shadow (Yazı Gölgesi) Oluşturucu Yazı gölgesini kaydırma, bulanıklık, renk ve opaklıkla tasarlayın — örnek metin üzerinde canlı önizleme. Oluştur