CSS Clamp() Üreteci
clamp() ile akışkan ve duyarlı CSS değerleri üretin. Viewport aralıkları boyunca minimum ve maksimum boyutlar arasında düzgünce ölçeklenir.
font-size: clamp(16px, 13.0909px + 0.9091vw, 24px);
Bu araç nasıl kullanılır
- 1
Enter the minimum size in pixels (the value at and below your small viewport).
- 2
Enter the maximum size in pixels (the value at and above your large viewport).
- 3
Set the min and max viewport widths in pixels that define where scaling starts and stops.
- 4
Read the generated clamp() declaration and click Copy to paste it into your stylesheet.
CSS Clamp() Üreteci nedir?
CSS clamp(min, tercih edilen, max) işlevi, bir değeri sınırlar içinde tutarken aralık içinde akışkan bir şekilde ölçeklenmesine olanak tanır. Kesme noktalarında ani geçişler yapmak yerine viewport genişliğiyle düzgünce büyüyen duyarlı tipografi için mükemmeldir. Bu araç, minimum/maksimum yazı tipi boyutlarınızdan ve viewport genişliklerinizden tercih edilen değerin doğru formülünü hesaplar.
Yaygın kullanım örnekleri
Building fluid headings that grow from 24px on mobile to 48px on desktop without writing media-query breakpoints.
Setting responsive body copy that stays readable between a 320px phone and a 1200px laptop.
Scaling section padding or gap values fluidly so layouts breathe proportionally across screen sizes.
Replacing a stack of font-size overrides at 480px, 768px, and 1024px with one clamp() declaration.
Generating clamp() values for a design system so spacing and type scale consistently from one formula.
Quickly checking the px and vw math for a fluid value you sketched out in a design tool like Figma.
Sıkça sorulan sorular
Tarayıcı uyumluluğu?▼
İlgili araçlar
Renk Dönüştürücü (HEX/RGB/HSL)
Renkleri HEX, RGB ve HSL biçimleri arasında dönüştürün. Bir rengi görsel olarak seçin veya değerleri elle girin.
CSS Box Shadow Oluşturucu
CSS box-shadow değerlerini görsel olarak oluşturun. Gerçek zamanlı önizleyin ve oluşturulan CSS'i kopyalayın.
CSS Renk Geçişi Oluşturucu
Doğrusal ve radyal CSS renk geçişleri oluşturun. Renkleri görsel olarak seçin ve oluşturulan CSS'i kopyalayın.
Cubic Bezier Hızlanma Eğrisi Oluşturucu
CSS için cubic-bezier hızlanma (easing) eğrileri oluşturun. Standart hazır ayarları içerir.
Renk Paleti Üreteci
Herhangi bir temel renkten uyumlu renk paletleri üretin. Tamamlayıcı, analog, üçlü ve monokromatik şemaları destekler.
CSS Border Radius Oluşturucu
Karmaşık CSS border-radius değerlerini görsel olarak oluşturun. Her köşe için bağımsız kontrol.