Yükleniyor...

CSS Medya Sorguları

Duyarlı Tasarım zihniyeti kurdu: tek HTML ağacı, viewport meta, akışkan kabuk, göreli birimler. Medya sorguları anahtardır — koşul tuttuğunda (çoğunlukla viewport genişliği) açılan CSS blokları. Bu ders sözdizimini ve sakin alışkanlıkları öğretir; Duyarlı Görseller ve Breakpoints araç setini sonra derinleştirir.

Medya sorgusu araç kutusu

📊 Medya sorgularına bir bakış

Parça	Günlük işi
`@media`	Koşullu bir CSS bloğu açar
Medya özelliği (`min-width`, `max-width`, …)	Tarayıcının değerlendirdiği test
`and`	Listelenen her özelliğin tutmasını ister
Virgülle ayrılmış sorgular	Mantıksal veya — eşleşen herhangi bir liste yeter
`{ }` içindeki kural seti	Sorgu tuttuğu sürece uygulanan stiller
Medya türü (`screen`, `print`)	Çıktı ortamı için isteğe bağlı filtre

Sorgular olmadan her kural «her zaman açık»tır. Onlarla önceki dersin sağlam temelini korur ve değişiklikleri katman katman eklersiniz — daha geniş sütunlar, daha büyük tip, farklı gezinme — yalnızca viewport taşıyabildiğinde.

`@media` anatomisi

Klasik kalıp: parantez içinde özellik, ardından normal bildirimlerden oluşan süslü parantez bloğu. Genişliklerde mümkünse rem veya em kullanın — kök/tip ayarlarıyla cihaz pikseli listelerinden daha iyi ölçeklenirler.

Temel min-width medya sorgusu

css

.nav {
display: block;
}

@media (min-width: 48rem) {
.nav {
display: flex;
gap: 1rem;
}
}

`min-width` ile mobile-first

Dar düzeni temel stil sayfasında yazın. Viewport büyüdükçe @media (min-width: …) ile iyileştirmeler ekleyin. Her adım net bir katmanı değiştirsin — boşluk, sütunlar veya gezinme — her basamakta tüm sayfayı yeniden yazmayın.

Mobile-first iyileştirme

css

.hero {
padding: 1rem;
font-size: 1.125rem;
}

@media (min-width: 40rem) {
.hero {
padding: 2rem;
font-size: 1.25rem;
}
}

@media (min-width: 64rem) {
.hero {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
}

`max-width` ile desktop-first

Temel geniş bir düzense @media (max-width: …) bir eşiğin altında stilleri sıkılaştırır — sütunları istifleyin, padding’i küçültün, chrome’u sadeleştirin. Projede tutarlı kalın: nedensizce salt min-width ile salt max-width yığınları arasında zıplamayın.

Desktop-first sıkılaştırma

css

.sidebar {
width: 16rem;
float: left;
}

@media (max-width: 50rem) {
.sidebar {
width: 100%;
float: none;
}
}

Özellikleri `and` ile birleştirmek

Özellikleri hepsinin tutması gerekecek şekilde zincirleyin. Aralıklar (min ve max birlikte) veya genişliği başka bir özellikle eşlemek için yararlıdır. Tam @media listeleri arasındaki virgül veya demektir.

and ile aralık

css

.card-grid {
display: grid;
gap: 1rem;
grid-template-columns: 1fr;
}

@media (min-width: 40rem) and (max-width: 63.99rem) {
.card-grid {
grid-template-columns: 1fr 1fr;
}
}

Genişliğin ötesi — yazdırma (ve sakin ekler)

Genişlik günlük araçtır. print gibi türler kâğıt için chrome’u gizler. Tercih özellikleri (ör. prefers-reduced-motion) erişilebilirlik cilasıdır — burada ölçülü kullanın; Breakpoints dersi stratejiyi düzenler, Erişilebilirlik hareketi sonra işler.

Basit yazdırma stilleri

css

@media print {
.site-nav,
.ad-slot {
display: none;
}

body {
color: #000;
background: #fff;
}
}

Sakin bir breakpoint alışkanlığı

Sizin düzen gerilim noktalarınıza uyan kısa, adlı genişlik listesi seçin — her telefon modeline değil. Belgeleyin (ör. «nav 48rem altında katlanır»). Akışkan temel + az sorgu, cihaz başına kural ormanından iyidir. Sonraki dersler görselleri ve daha dolu bir breakpoint planını getirir.

Kendiniz deneyin

İstiflenmiş bir nav alın ve onu flex yapan bir @media (min-width: …) ekleyin.
Aynı fikri desktop-first max-width sıkılaştırmasıyla yeniden yazın — temel stillerdeki farkı görün.
Yalnızca iki sütunluk bir bant için min-width ve max-width ile aralık sorgusu ekleyin.
@media print ile dekoratif bir afişi gizleyin.
Alıştırma sayfanız için üç adlı breakpoint yazın — listeyi kısa tutun.

Yaygın hatalar

Düzen gerilim noktaları yerine her cihaz markası için ayrı sorgu
Kapanış } unutup sonraki CSS’in sorgu içinde kaybolması
Cascade kendiyle savaşana dek min-width ve max-width yığınlarını rastgele karıştırmak
Yalnızca sorgulara güvenip Duyarlı Tasarım’daki akışkan kapsayıcı ve göreli birimleri yok saymak
Buraya uzun bir breakpoint kataloğu dökmek — o zanaat Breakpoints’te sürer; görseller Duyarlı Görseller’de

Özet

Medya sorguları CSS’i sarmalayarak yalnızca koşullar tutunca uygular
min-width yukarı doğru zenginleştirir (mobile-first); max-width aşağı doğru sıkılaştırır (desktop-first)
and tüm özellikleri ister; sorgular arası virgüller veya gibi davranır
Gerçek düzen ihtiyaçlarına bağlı az, adlı breakpoint tutun
Sırada: Duyarlı Görseller — sütunu kırmadan ölçeklenen medya

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓

Sorular

🎯

70%

Geçmek İçin

♾️

∞

Süre

🔄

∞

Deneme

📝 Talimatlar

Her soruyu dikkatle okuyun
Her soru için en iyi cevabı seçin
Quiz'i istediğiniz kadar tekrar alabilirsiniz
İlerlemeniz üstte gösterilecek

Dil