HesapHanem

CSS Clamp Oluşturucu

Yazı tipi boyutunuzu iki görünüm alanı genişliği arasında akıcı biçimde ölçeklendiren bir clamp() değeri oluşturun.

Nasıl hesaplanır?

En küçük ve en büyük yazı boyutunu piksel olarak, boyutun ölçekleneceği iki görünüm alanı genişliğini de piksel olarak girin. Araç bu iki noktadan geçen bir doğru çizer:

eğim = (maxpx − minpx) / (maxvw − minvw)
kesişim = minpx − eğim × minvw

Eğim 100 ile çarpılıp vw kısmı olur; kesişim 16'ya bölünüp rem kısmı olur (tarayıcının varsayılan kök boyutu 16px kabul edilir). Minimum ve maksimum da rem'e çevrilir. Rem değerleri üç, vw değeri iki ondalığa indirilir. İki genişlik eşitse eğim tanımsızdır ve sonuç verilmez.

Örnek hesaplama

Yazının 320px genişlikte 16px, 1200px genişlikte 24px olmasını istiyorsunuz. Eğim = (24 − 16) / (1200 − 320) = 0,00909. Kesişim = 16 − 0,00909 × 320 = 13,09px, yani 0,818rem. Eğim × 100 ile 0,91vw bulunur. Minimum 16 / 16 = 1rem, maksimum 24 / 16 = 1,5rem'dir. Hazır kural: clamp(1rem, 0.818rem + 0.91vw, 1.5rem).

Bu örneği dene →

Sık yapılan hatalar

  • Yazı boyutlarını rem, genişlikleri em olarak girmek; buradaki tüm alanlar düz pikseldir.
  • Sitenizin kök yazı boyutu 16px değilse rem sonucunun tam doğru olduğunu sanmak; dönüşüm hep 16'ya bölerek yapılır.
  • Çiftleri ters girip minimum genişliği maksimumdan büyük yapmak; araç engellemez ve çıkan doğru ters olur.
  • Metin için yalnızca vw kullanmak; bu kullanıcının tarayıcı yazı boyutu tercihini yok sayar, çıktıdaki rem kısmı yakınlaştırmanın çalışmasını sağlar.
  • Yalnızca tercih edilen kısmı clamp() olmadan yapıştırmak; böylece alt ve üst sınır kalkar.

Kaynaklar

Bu hesaplama hakkında

Bu araç, akıcı tipografi için duyarlı bir CSS clamp() fonksiyonu üretir — clamp(min, tercih edilen, max) — burada "tercih edilen" değer, yazı tipi boyutunuzu belirlediğiniz minimum ve maksimum görünüm alanı genişliği arasında akıcı biçimde ölçeklendiren, vw tabanlı hesaplanmış bir ifadedir; böylece boyut, seçtiğiniz sınırların dışına çıkmaz.

Ön uç geliştiriciler, başlık ve gövde metnini yeniden boyutlandırmak için birden fazla media-query kırılma noktası yazmak yerine, tek bir akıcı CSS kuralı elde etmek için kullanır. Çıktı, doğrudan stil dosyasına kopyalanıp yapıştırılabilen hazır bir clamp() kuralıdır.

Bu faydalı oldu mu?

En fazla 3 tepki seçebilirsiniz.

Yorumlar (1)

  • Editör ekibi

    320 px görüntü alanında 16 px, 1200 px'te 24 px olacak bir başlık için araç clamp(1rem, 0.818rem + 0.91vw, 1.5rem) değerini verir. Bunu font-size içine yapıştırın, ardından iki uç genişlikte ve tarayıcıyı yüzde 200 yakınlaştırarak deneyin. Aynı değer yalnızca yazı için değil, padding, margin ve gap için de çalışır. Bu yöntemle hangi özellikleri ölçeklemeyi düşünüyorsunuz?

Popüler hesaplayıcılar

Kredi Hesaplama

Aylık taksit, toplam faiz ve ödeme planını hesaplayın.

Yüzde Hesaplama

Yüzde değişim, indirim ve oran hesaplamaları.

İndirim Hesaplama

İndirimli fiyatı, kazancı ve indirim tutarını hesaplayın.

Vücut Kitle Endeksi (VKİ)

Boy ve kiloya göre vücut kitle endeksini hesaplayın.

Yaş Hesaplama

Doğum tarihinden bugüne tam yıl, ay ve gün cinsinden yaşınızı hesaplayın.

Bileşik Faiz Hesaplama

Ana para, faiz oranı ve süreye göre bileşik faizle nihai tutarı hesaplayın.

Tüm Hesaplayıcılar