Kapsayıcı Sorgusu Birimleri: cqw cqh
Öğeleri, cqw, cqh ve ilgili kapsayıcı birimlerini kullanarak sorgu kapsayıcılarına göre boyutlandırın.
Kapsayıcı Sorgusu Birimleri: cqw cqh, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 3. 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.
Kapsayıcı Sorgusu Birimleri
CSS, değerlerin boyutunu sorgu kapsayıcısının boyutlarının yüzdesi olarak belirleyen kapsayıcıya göreli birimler sağlar. Bunlar görünüm alanı birimlerine (vw/vh) benzer, ancak bileşenin kapsayıcısına göreli çalışır.
cqw — Kapsayıcı Sorgusu Genişliği
1cqw = kapsayıcının satır içi boyutunun %1'i (yatay yazımda genişlik). Tipografiyi ve boşlukları bileşen kapsayıcısına göre ölçeklendirin.
<div class="card-wrapper"><h3 class="card-title">Fluid Card Title</h3></div>
cqh — Kapsayıcı Sorgusu Yüksekliği
1cqh = kapsayıcının blok boyutunun %1'i (yükseklik). container-type: size gerektirir; yalnızca inline-size yeterli değildir.
<div class="hero-wrapper"><div class="hero-card">Hero Text</div></div>
cqi — Kapsayıcı Satır İçi Boyutu
cqi, yatay yazımda cqw için bir takma addır; özellikle satır içi boyutu ifade eder ve yatay yöne bağlı değildir.
cqb — Kapsayıcı Blok Boyutu
cqb, cqh gibidir, ancak boyuta göreli çalışır; yazım kipinden bağımsız olarak blok boyutunu ifade eder.
cqmin ve cqmax
cqmin = daha küçük kapsayıcı boyutunun %1'i. cqmax = daha büyük boyutun %1'i. vmin/vmax değerlerine benzer.
<div class="icon-wrapper"><div class="icon"></div></div>
Bileşenlerde Akışkan Tipografi
Kapsayıcı birimleri, gerçekten bileşen kapsamına alınmış akışkan tipografi oluşturmayı sağlar:
<div class="card-wrapper"><h3 class="card-title">Fluid Title</h3></div>
Kapsayıcı Birimleri Ne Zaman Kullanılır
Kapsayıcı birimlerini şu durumlarda kullanın:
- Bir bileşenin metni bileşenin genişliğiyle birlikte ölçeklenmelidir
- Bir bileşenin içindeki boşluk, boyutuyla orantılı olmalıdır
- Görünüm alanından bağımsız, bileşen düzeyinde akışkan bir tasarım istiyorsanız
Kapsayıcı Birimleri ve Görünüm Alanı Birimleri
Temel fark şudur: Görünüm alanı birimleri (vw, vh) tarayıcının görünüm alanını temel alır. Kapsayıcı birimleri (cqw, cqh) en yakın sorgu kapsayıcısını temel alır. Bu, bileşenleri gerçekten taşınabilir kılar; aynı bileşen 300px genişliğindeki bir kenar çubuğunda da 900px genişliğindeki bir ana alanda da orantılı görünür.
Gerekli: kapsayıcı türü
Kapsayıcı birimleri yalnızca bir kapsayıcı türü üst öğesi bulunduğunda çalışır. Böyle bir öğe yoksa kapsayıcı sorgusu birimi, küçük görünüm alanı birimine (svw/svh) geri döner.
Uygulamalı Örüntü
Kapsayıcı birimlerini kullanan eksiksiz bir bileşen:
<div class="feature">
<h2 class="feature-title">Feature Name</h2>
<p class="feature-text">A short description of this feature that scales with the container.</p>
</div>
Hızlı Kontrol
400px genişliğindeki bir kapsayıcının içindeki bileşende font-size: 5cqw ne üretir?
Özet
Kapsayıcı sorgusu birimleri (cqw, cqh, cqi, cqb, cqmin, cqmax), değerleri görünüm alanı yerine sorgu kapsayıcısına göre boyutlandırır. Bileşen genişliğiyle ölçeklenen akışkan tipografi için cqw kullanın. Bunların çalışması için bir container-type üst öğesi gerekir; böyle bir öğe yoksa görünüm alanı birimlerine geri dönerler.
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
Sıkça Sorulan Sorular
“Kapsayıcı Sorgusu Birimleri: cqw cqh” dersi ücretsiz mi?
Evet — “Kapsayıcı Sorgusu Birimleri: cqw cqh” 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.
“Kapsayıcı Sorgusu Birimleri: cqw cqh” dersinde ne öğreneceğim?
Öğeleri, cqw, cqh ve ilgili kapsayıcı birimlerini kullanarak sorgu kapsayıcılarına göre boyutlandı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 3. dersidir.
“Kapsayıcı Sorgusu Birimleri: cqw cqh” 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
- container-type ve container-name
- @container Kuralları ve Kesme Noktaları
- Kapsayıcı Sorgusu Birimleri: cqw cqh
- Kapsayıcı Sorguları ve Medya Sorguları Karşılaştırması