Genişlik, Yükseklik ve Yön Sorguları
Medya özellikleriyle belirli görünüm alanı boyutlarını ve cihaz yönlerini hedefleyin.
Genişlik, Yükseklik ve Yön Sorguları, 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.
width Medya Özelliği
width özelliği görünüm alanının genişliğini hedefler. Aralıkları tanımlamak için min-width ve max-width kullanın.
<div class="box">width feature demo</div>
height Medya Özelliği
height özelliği görünüm alanının yüksekliğini hedefler. Dikey alanın sınırlı olduğu kısa görünüm alanları (yatay telefonlar gibi) için kullanışlıdır.
<div class="hero">Hero (grows on tall viewports)</div>
Kısa Görünüm Alanı Deseni
Kısa görünüm alanlarını algılayın ve içeriğin taşmasına neden olabilecek iç dolgu ve yükseklikleri azaltın:
<div class="modal">Modal content that scrolls when the viewport is short. Lorem ipsum dolor sit amet, consectetur.</div>
orientation: portrait ve landscape
orientation özelliği, görünüm alanının diğer yöndekine göre daha uzun (portrait) veya daha geniş (landscape) olup olmadığını algılar.
<div class="hero">Orientation-aware hero</div>
Cihaz Piksel Oranı
Yüksek DPI (Retina) ekranları resolution özelliğiyle veya standart dışı olmasına rağmen yaygın biçimde desteklenen -webkit-device-pixel-ratio ile hedefleyin.
<div class="logo"></div>
aspect-ratio Özelliği
Belirli görünüm alanı en-boy oranlarını hedefleyin. İçeriği 4:3 ve 16:9 görünüm alanlarında farklı biçimde ortalamak için kullanışlıdır.
<div class="video"></div>
hover Yeteneği
hover: hover özelliği, birincil girişin üzerine gelmeyi destekleyen hassas bir işaretleyici olup olmadığını algılar. Dokunmatik cihazlara özel stiller için kullanışlıdır.
<div class="card">Card (hover me)</div>
<div class="card is-hovered">Card (hover state shown)</div>
pointer Özelliği
pointer: fine hassas bir fare imlecidir; pointer: coarse ise parmak veya kalemdir. Dokunma hedeflerinin boyutlarını ayarlamak için kullanışlıdır.
<button>Tap target</button>
width ve height Değerlerini Birleştirme
min-width değerini max-height ile birleştirerek yatay telefonlara özel kurallar oluşturun:
<div class="nav">Nav bar</div>
Görünüm Alanı ve Cihaz Boyutları
CSS medya sorguları fiziksel cihaz ekranının boyutlarını değil, görünüm alanını (tarayıcı penceresini) hedefler. Masaüstü tarayıcı penceresini yeniden boyutlandırmak, görünüm alanı genişliğini gerçek zamanlı olarak değiştirir.
Görünüm Alanı Birimleri ve Medya Sorguları
Medya sorguları ve görünüm alanı birimleri (vw, vh) aynı görünüm alanı boyutlarına tepki verir. Düzen değişiklikleri için medya sorgularını, bir düzen içindeki akışkan boyutlandırma için görünüm alanı birimlerini kullanın.
Hızlı Kontrol
Bir cihazın öğelerin üzerine gelebilen hassas bir işaretleyiciye sahip olup olmadığını hangi medya özelliği algılar?
Özet
Medya özellikleri arasında width, height, orientation, resolution, hover ve pointer bulunur. Düzenleri görünüm alanı boyutlarına ve cihaz yeteneklerine uyarlamak için bunları kullanın. hover ve pointer özellikleri, yalnızca ekran boyutuna bakmanın ötesinde dokunmatik ve fare kullanılan cihazları hedeflemeye yardımcı olur.
Sıkça Sorulan Sorular
“Genişlik, Yükseklik ve Yön Sorguları” dersi ücretsiz mi?
Evet — “Genişlik, Yükseklik ve Yön Sorguları” 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.
“Genişlik, Yükseklik ve Yön Sorguları” dersinde ne öğreneceğim?
Medya özellikleriyle belirli görünüm alanı boyutlarını ve cihaz yönlerini hedefleyin. 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.
“Genişlik, Yükseklik ve Yön Sorguları” 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
- Sözdizimi ve Yaygın Kesme Noktaları
- Genişlik, Yükseklik ve Yön Sorguları
- Prefers-Color-Scheme ve Prefers-Reduced-Motion
- Birden Fazla Medya Sorgusunu Birleştirme