CSS Academy · Ders

Akışkan Değerler için min(), max() ve clamp()

min(), max() ve clamp() kısa gösterimini kullanarak değerleri minimumlar ve maksimumlar arasında sınırlandırın.

2. ders / 413 adım

Akışkan Değerler için min(), max() ve clamp(), CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 2. 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.

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

CSS karşılaştırma işlevleri (min(), max(), clamp()), medya sorguları kullanmadan bağlama uyum sağlayan duyarlı boyutlandırmayı mümkün kılar — kesme noktası tabanlı yaklaşımlardan daha zarif ve özlüdür.

min() — En Küçüğü Seçme

min(a, b, ...) tüm bağımsız değişkenleri değerlendirir ve en küçüğünü kullanır. Buradaki "minimum", görsel sonuçtur; yani en fazla kısıtlanan seçenektir.

  <div class="container">Container</div>

max() — En Büyüğü Seçme

max(a, b, ...) en büyük değeri seçerek minimum tabanın her zaman karşılanmasını sağlar.

  <p>Responsive text</p>

clamp(min, preferred, max)

clamp() bir değeri bir aralık içinde sınırlar. Tercih edilen değer (ortadaki bağımsız değişken) genellikle akışkandır. Minimum ve maksimum değerler kesin sınırlar sağlar.

  <h1>Clamped Heading</h1>

clamp() ile Akışkan Tipografi Ölçeği

Birden fazla kesme noktası geçersiz kılmasının yerine her başlık düzeyi için tek bir clamp() kullanın:

  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>

clamp() ile Akışkan Boşluklandırma

Akışkan boyutlandırmayı padding, margin ve gap için de uygulayın — bu, "içsel" tasarım için temel bir tekniktir:

  <div class="section">
    <div class="grid"><div>A</div><div>B</div></div>
  </div>

Genişlik Koruması Olarak min()

En temiz kapsayıcı deseni: görünüm alanının her zaman %90'ı olsun, ancak tek bir ifadeyle 1200px'den geniş olmasın:

  <div class="wrapper">Wrapper</div>

Minimum Yazı Tipi Boyutu için max()

Küçük görünüm alanlarında gövde metninin hiçbir zaman çok küçülmemesini sağlayın:

  <p class="text-body">Body text that never gets too small.</p>

min/max/clamp İç İçe Kullanımı

Karmaşık kısıtlamalar için bu işlevler iç içe kullanılabilir:

  <div class="element">Padded element</div>

Grid'de Karşılaştırma İşlevleri

Daha güvenli bir sütun tabanı için minmax() içinde min() kullanın:

  <div class="grid"><div>Card</div></div>

Tarayıcı Desteği

Üç karşılaştırma işlevinin de modern tarayıcılarda tam desteği vardır (Chrome 79+, Firefox 75+, Safari 11.1+). Satıcı öneklerine gerek yoktur.

Hızlı Kontrol

Bir başlıkta font-size: clamp(1rem, 3vw, 2.5rem) kullanılıyor. 16px kök değeri varsayılırsa 3vw hangi görünüm alanı genişliğinde 1rem'e eşit olur?

İnteraktif derste cevapla

Özet

min() daha küçük değeri seçer (üst sınır). max() daha büyük değeri seçer (alt taban). clamp(min, preferred, max) akışkan bir değeri sınırlar. Birlikte, medya sorguları olmadan akışkan tipografi ve boşluklandırma sağlarlar. En güçlü desen, otomatik olarak duyarlı başlıklar için clamp(1.5rem, 4vw, 3rem) kullanmaktı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şla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“Akışkan Değerler için min(), max() ve clamp()” dersi ücretsiz mi?

Evet — “Akışkan Değerler için min(), max() ve clamp()” 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.

“Akışkan Değerler için min(), max() ve clamp()” dersinde ne öğreneceğim?

min(), max() ve clamp() kısa gösterimini kullanarak değerleri minimumlar ve maksimumlar arasında sınırlandırı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 2. dersidir.

“Akışkan Değerler için min(), max() ve clamp()” 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

Dinamik Hesaplamalar için calc()
Akışkan Değerler için min(), max() ve clamp()
Grid'de repeat() ve minmax()
color-mix() ve Göreli Renk Sözdizimi

← CSS Academy Sayfasına Dön