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üçükse 300px kullanır, büyükse 50% kullanır */

Gerçek Dünya Senaryoları

1. Maksimum Genişlik Sınırlaması (min ile)

.container {
  /* Klasik yöntem */
  width: 100%;
  max-width: 1200px;
  
  /* Modern yöntem - tek satırda */
  width: min(1200px, 100%);
  /* veya daha esnek */
  width: min(1200px, 100% - 2rem); /* yanlarda boşluk bırakır */
}

Neden min() kullanıyoruz? Çünkü container'ın 1200px'i aşmamasını istiyoruz. Ekran küçülünce min() otomatik olarak daha küçük değeri (100%) seçer.

2. Minimum Genişlik Garantisi (max ile)

.button {
  /* Buton asla 120px'den küçük olmayacak */
  width: max(120px, 30%);
  /* Ekran çok küçükse bile minimum 120px kalır */
}

.sidebar {
  /* Sidebar minimum 250px, ideal 20% genişlikte */
  width: max(250px, 20vw);
}

3. Tipografi ve Okuma Rahatlığı

.article {
  /* Metin satırları optimal okuma için 65 karakter civarı */
  max-width: min(65ch, 90%);
  /* ch birimi = 0 karakterinin genişliği */
}

.heading {
  /* Başlıklar ekranda çok uzun açılmasın */
  max-width: min(20ch, 100%);
}

4. Responsive Padding/Margin

.section {
  /* Küçük ekranda 5%, büyük ekranda max 60px */
  padding-inline: min(5vw, 60px);
}

.card {
  /* Minimum 1rem, maksimum ekranın %3'ü kadar boşluk */
  gap: min(3vw, 2rem);
}

Birden Fazla Değer Kullanma

Her iki fonksiyon da 2'den fazla değer kabul eder:

.responsive-box {
  /* 3 değerden en küçüğünü seç */
  width: min(600px, 80%, 90vw);
  
  /* Pratik kullanım */
  padding: min(5%, 3rem, 40px);
}

.flexible-grid {
  /* Grid kolonları için */
  grid-template-columns: repeat(auto-fit, minmax(
    max(250px, 30%), /* minimum genişlik */
    1fr
  ));
}

Calc() ile Kombinasyon

En güçlü kullanım calc() ile birleştirme:

.smart-container {
  /* Ekran genişliğinin 90%'ı ama max 1400px, 
     ve her iki yanda 2rem boşluk garantili */
  width: min(1400px, 100% - 4rem);
  margin-inline: auto;
}

.dynamic-spacing {
  /* Ekran büyüdükçe artan ama sınırlı boşluk */
  padding: max(1rem, min(5vw, 4rem));
}

Avantajları

1. Media Query Azaltır: Çoğu durumda breakpoint'e gerek kalmaz
2. Daha Maintainable: Tek satırda responsive davranış tanımlanır
3. Performans: Tarayıcı runtime'da hesaplar, JavaScript gerekmez
4. Kapsayıcı Tasarım: Farklı ekran boyutları için doğal adaptasyon

Karşılaştırma: Eski vs Yeni Yöntem

/* ❌ Eski yöntem - media query gerekir */
.container {
  width: 100%;
}
@media (min-width: 1200px) {
  .container {
    width: 1200px;
  }
}

/* ✅ Modern yöntem - tek satır */
.container {
  width: min(1200px, 100%);
}

Tarayıcı Desteği

Modern tarayıcıların tümü bu fonksiyonları destekliyor (2020'den beri). Eski tarayıcılar için fallback:

.element {
  width: 90%; /* Fallback */
  width: min(1200px, 90%); /* Modern tarayıcılar için */
}

Özet

min() ve max() fonksiyonları modern CSS'in intrinsic design (içsel tasarım) felsefesinin temel taşları. Media query yazmadan, JavaScript kullanmadan, sadece CSS ile gerçekten responsive ve akıllı layoutlar oluşturmamızı sağlıyorlar. Özellikle clamp() fonksiyonu ile birlikte kullanıldığında, modern web tasarımının vazgeçilmez araçları haline geliyorlar.