Ana içeriğe geç
LibraTool logoLibraTool

Ücretsiz CSS clamp() Oluşturucu

Duyarlı tipografi ve aralık için akışkan bir CSS clamp() değeri oluşturun. Min/maks boyutu ve görünüm alanı aralığını ayarlayın, canlı önizleme görün ve tek satır CSS'i kopyalayın.

Yüklendikten sonra çevrimdışı çalışır
Çıktı birimi:
CSS değeri
font-size: clamp(1rem, 1.5023vw + 0.6479rem, 2rem);
Tailwind sınıfı
text-[clamp(1rem,1.5023vw_+_0.6479rem,2rem)]
768px genişlik → 21.9px
Aa 22px

Farklı görüntü alanlarında oluşturulan boyut

375px genişlikAa 16px
908px genişlikAa 24px
1440px genişlikAa 32px

clamp(min, preferred, max), bir değeri görüntü alanıyla akıcı biçimde ölçekler; ardından min ve max değerlerinde sabitlenir. Tipografi, boşluk ve genişlikler için medya sorgularını tek satırla değiştirir.

Yaygın kullanımlar

  • Akışkan Responsive Tipografi OluşturMobil ve masaüstü arasında yazı tipi boyutlarını tek satırla sorunsuz bir şekilde ölçeklendir.
  • Akışkan Kenar Boşlukları ve AralıklandırmaBölüm aralıklandırmasını viewport ile büyütmeyi sağla, değerlendirme noktalarında atlamak yerine.
  • Medya Sorgularını clamp() ile DeğiştirDeğerlendirme noktası geçersiz kılınmalarının yığınlarını tek bir akışkan değer içine daralt.
  • Akışkan Tip Ölçeği OluşturBir tasarım sistemi tip ölçeği için tutarlı clamp() adımları oluştur.
  • Akışkan Kahramanımız ve Görüntü BaşlıklarıBüyük sayfa başlıklarını dramatik ancak güvenli bir şekilde ölçeklendir.

Nasıl çalışır

Bu araç, elle yazılmış doğrusal enterpolasyon formülüyle CSS clamp() değerlerini hesaplar — kütüphane yok, sunucuya gidiş-dönüş yok. İki boyut ve iki görünüm alanı genişliği girersiniz; matematik tarayıcınızda anında çalışır ve yazı tipinizi veya boşluklarınızı bu kırılma noktaları arasında akıcı şekilde ölçekleyen vw tabanlı tercih edilen değere sahip, yapıştırmaya hazır bir clamp() ifadesi üretir.

  1. 1
    Doğrusal eğim hesabı
    Araç piksel başına piksel eğimi hesaplar: (maxSize - minSize) / (maxViewport - minViewport). Bu eğim daha sonra 100 ile çarpılarak vw birimine dönüştürülür; CSS görünüm alanına göre ölçeklemenin özü budur.
  2. 2
    Kesişim değerinin türetilmesi
    Doğrusal işlevin minimum görünüm alanında tam olarak minimum boyutunuza denk gelmesi için bir kesişim farkı (px veya rem cinsinden) hesaplanır. Eğim ve kesişim birlikte clamp() içindeki tercih edilen değeri oluşturur — gerçekten ölçeklenen kısım budur.
  3. 3
    Birim dönüştürme ve çıktı biçimlendirme
    rem çıktısını seçerseniz, her piksel değeri clamp() dizesine yazılmadan önce yapılandırdığınız kök yazı tipi boyutuna (varsayılan 16px) bölünür. Tailwind sözdizimine göre boşlukların alt çizgiyle değiştirildiği eşleşen bir Tailwind keyfi değer sınıfı da üretilir.
  4. 4
    Canlı görünüm alanı kaydırıcı önizlemesi
    Bir aralık kaydırıcısı 320px ile 1920px genişlik arasında gezinmenizi sağlar. Her konumda aynı eğim ve kesişim formülü sınırlandırılmış boyutu gerçek zamanlı hesaplar ve örnek metni bu hesaplanan piksel boyutunda çizer; böylece bir şey kopyalamadan önce ölçekleme davranışını görebilirsiniz.

İlgili araçlar

🟦

CSS Grid Oluşturucu

Görsel olarak bir CSS grid tasarlayın — izler, birimler ve boşluklar — ve oluşturulan CSS ve HTML'yi kopyalayın.

Deneyin
📐

Ekran Çözünürlüğüm Nedir

Ekran çözünürlüğünüzü CSS ve gerçek piksel cinsinden, pencere boyutunu, piksel oranını, renk derinliğini, HDR'yi, dokunma desteğini ve yenileme hızını görün ve hepsini kopyalayın.

Deneyin
Popüler
✍️

İmza Oluşturucu

Faresiyle, parmağınızla veya kalemle bir imza çizin ya da adınızı el yazısı yazı tipiyle yazın, ardından şeffaf PNG veya SVG olarak dışa aktarın.

Deneyin

Sık sorulan sorular