Media query temelleri

@media kuralını ve ekran genişliği koşullarını öğrenirsin.

@media bloğu nedir?

@media bloğu, belirli bir koşul sağlandığında uygulanacak stilleri gruplandırır. En yaygın koşul ekran genişliğidir. Telefon genişliğinde başka, masaüstü genişliğinde başka stiller kullanabilirsin.

@media (max-width: 600px) {
  body {
    background: navy;
    color: white;
  }
}

Anahtar kelime @media, parantez içinde koşul, süslü parantezler içinde stiller.

max-width media feature

max-width bir media feature'dur (medya özelliği). "En fazla bu genişlik" anlamına gelir. @media (max-width: 600px) yazdığında, ekran 600px veya daha dar olduğunda stiller uygulanır.

Bu, masaüstünden telefona doğru gidildikçe stilleri değiştiren desktop-first yaklaşımında yaygındır. Büyük ekrandan başlayıp her daraltmada yeni bir @media eklersin.

min-width media feature

min-width ise "en az bu genişlik" demektir. @media (min-width: 768px) yazdığında, ekran 768px veya daha geniş olduğunda stiller uygulanır.

Bu, mobile-first yaklaşımının temel taşıdır. Telefona yönelik temel stilleri yazarsın, sonra her genişleme adımında yeni bir @media eklersin. Bugün bu yaklaşım önerilir.

Uygulama 600px altında arka planı değiştir

Bir @media (max-width: 600px) bloğu ekle. İçinde body seçicisi için background: navy ve color: white bildirimlerini yaz.

Örnek çözümü göster

/* 600px ve altında gövde rengini değiştir */
@media (max-width: 600px) {
  body {
    background: navy;
    color: white;
  }
}

Kendini test et

@media (max-width: 600px) ne zaman uygulanır?
```
@media (max-width: 600px) {
  body { font-size: 18px; }
}
```
- Yalnızca ekran 600px'den geniş olduğunda
- Yalnızca ekran 600px veya daha dar olduğunda
- Her ekran genişliğinde
- Yalnızca yatay moddayken
Cevabı göster

Yalnızca ekran 600px veya daha dar olduğunda — Doğru. max-width: 600px koşulu, ekran 600px veya daha dar olduğunda sağlanır.

@media bloğunu tamamla

@media (max-width: ____) {
  body { background: navy; }
}

Cevabı göster

@media (max-width: 600px) {
  body { background: navy; }
}

Hangisi doğrudur?
- max-width geniş ekranlar için, min-width dar ekranlar için uygulanır
- İkisi de yalnızca yazdırırken (print) uygulanır
- İkisi de her zaman uygulanır
- max-width dar ekranlar için, min-width geniş ekranlar için uygulanır
Cevabı göster

max-width dar ekranlar için, min-width geniş ekranlar için uygulanır — Doğru. max-width 'en fazla', min-width 'en az' demektir; max daraltmada, min genişletmede uygulanır.

Sıradaki ders: Breakpoints

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler