calc() fonksiyonu, CSS'te matematiksel hesaplamalar yapmamızı sağlayar. calc() CSS fonksiyonu, modern web tasarımında en çok duyarlı (responsive), esnek (flexible) ve hassas (precise) düzenler oluşturmak amacıyla kullanılır.
Sabit birimler (px, pt, cm gibi) → viewport değişse bile değişmez. Örneğin calc(100px + 50px) her zaman 150px olur.
Göreceli birimler (%, vw, vh, em, rem gibi) → viewport veya parent(mesela javascript ile) element boyutu değiştiğinde yeniden hesapl
Modern CSS'in en güçlü araçlarından ikisi olan min() ve max() fonksiyonları, responsive tasarımda dinamik değerler oluşturmamızı sağlıyor.
Temel Mantık
min() fonksiyonu: Verilen değerlerden en küçüğünü seçer max() fonksiyonu: Verilen değerlerden en büyüğünü seçer
/* min() - en küçük değeri kullanır */
width: min(500px, 100%);
/* Ekran 500px'den küçükse 100% kullanır, büyükse 500px kullanır */
/* max() - en büyük değeri kullanır */
width: max(300px, 50%);
/* 50% değeri 300px'den küç
clamp() fonksiyonu, modern CSS'in en güçlü ve kullanışlı araçlarından biri. Responsive tasarımda "fluid but constrained" (akışkan ama sınırlı) değerler oluşturmanıza olanak tanır.
clamp() Nedir?
clamp() üç parametre alır ve ortadaki değeri, minimum ve maksimum sınırlar arasında tutar:
clamp(MIN, PREFERRED, MAX)
Mantık:
Eğer PREFERRED < MIN ise → MIN kullanılır
Eğer PREFERRED > MAX ise → MAX kullanılır
Eğer MIN ≤ PREFERRED ≤ MAX ise → PREFERRED kullanıl
