PricingLoginStart free
CSS Academy · Ders

Min, Max ve Clamp İşlevleri

Kapsayıcı veya görünüm alanı boyutuna tepki veren uyarlanabilir boyutlandırma için min(), max() ve clamp() işlevlerini kullanın.

4. ders / 413 adım

Min, Max ve Clamp İşlevleri, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.

CSS Karşılaştırma İşlevleri Neden Kullanılır?

CSS karşılaştırma işlevleri, JavaScript kullanmadan koşullu boyutlandırmayı ifade etmenizi sağlar: "bu boyutu kullanın, ancak hiçbir zaman bu sınırların altına/üstüne çıkmayın." Bunlar modern, akışkan ve duyarlı tasarımın temelini oluşturur.

min() İşlevi

min(), virgülle ayrılmış değerler listesindeki en küçük değeri döndürür. Tarayıcı, geçerli görünüm alanı boyutunda hangi değer daha küçükse onu seçer.

<div class="container">Container width: min(800px, 90%)</div>

max() İşlevi

max(), en büyük değeri döndürür. Büyümeye de devam eden minimum boyutlar ayarlamak için kullanışlıdır.

<p>Text sized with max(1rem, 2vw)</p>

clamp() İşlevi

clamp(min, preferred, max), bir değeri minimum ve maksimum arasında sınırlar. Tercih edilen değer genellikle akışkandır (örneğin vw).

<h1>Clamped Heading</h1>

Akışkan Tipografi için clamp()

clamp() ile akışkan tipografi, birden çok medya sorgusu yazı tipi boyutu geçersiz kılmasının gerekliliğini ortadan kaldırır:

<h1>Main Heading</h1>
  <h2>Subheading</h2>
  <p>Body copy that scales fluidly with the viewport.</p>

Akışkan Boşluklandırma için clamp()

Aynı deseni boşluklandırmaya da uygulayarak doğal olarak duyarlı kenar boşlukları ve iç boşluklar elde edebilirsiniz:

<div class="section">Section with fluid padding</div>

Kapsayıcılar için min()

Asla max-width değerini aşmayan ve yatay kaydırma eklemeyen güvenli bir kapsayıcı deseni:

<div class="wrapper">Safe wrapper container</div>

İşlevleri İç İçe Kullanma

Karmaşık ifadeler için karşılaştırma işlevlerini iç içe kullanabilirsiniz:

<p class="hero-text">Nested min/max inside clamp()</p>

calc() ile clamp() Birlikte Kullanımı

İki boyut arasında hassas akışkan enterpolasyon için clamp() içinde calc() kullanın:

<h1>Precise fluid heading</h1>

min-content max-content fit-content

CSS ayrıca anahtar sözcük olarak boyut değerleri de sunar:

  • min-content: taşma olmadan mümkün olan en küçük boyut
  • max-content: içeriğin ihtiyaç duyduğu kadar yer kaplar
  • fit-content(): max-content gibidir, ancak sağlanan bir sınırla kısıtlanır
<span class="tag">Tag label</span>

Tarayıcı Desteği

min(), max() ve clamp(), tüm modern tarayıcılarda desteklenir. Önek kullanmanız gerekmez. Bu işlevler; uzunluk, frekans, zaman veya sayı değeri beklenen her yerde kullanılabilir.

Hızlı Kontrol

600px genişliğindeki bir görünüm alanında bir başlıkta font-size: clamp(1rem, 4vw, 3rem) kullanılıyor. Yazı tipi boyutu nedir?

İnteraktif derste cevapla

Özet

min() en küçük değeri, max() ise en büyük değeri seçer. clamp(min, preferred, max), akışkan bir değeri belirlenen sınırlar içinde tutar. Bu işlevler, modern akışkan tipografi ve boşluklandırmanın temelini oluşturur ve çoğu zaman birden çok medya sorgusu geçersiz kılmasının gerekliliğini ortadan kaldırır.

Başlamak ücretsiz

Yapay zeka eğitmeniyle CSS öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar
40
Dersler
159
Ücretsiz öğrenmeye başlaTüm kursu görüntüle

Sıkça Sorulan Sorular

“Min, Max ve Clamp İşlevleri” dersi ücretsiz mi?

Evet — “Min, Max ve Clamp İşlevleri” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.

“Min, Max ve Clamp İşlevleri” dersinde ne öğreneceğim?

Kapsayıcı veya görünüm alanı boyutuna tepki veren uyarlanabilir boyutlandırma için min(), max() ve clamp() işlevlerini kullanın. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

CSS Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Min, Max ve Clamp İşlevleri” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Mutlak Birimler: px, pt, cm
  2. Göreli Birimler: em ve rem
  3. Görünüm Alanı Birimleri: vw, vh, dvh
  4. Min, Max ve Clamp İşlevleri
← CSS Academy Sayfasına Dön