Media query, ekran genişliğine (veya başka özelliklere) göre farklı CSS kuralları uygulamanı sağlar. Böylece aynı site telefonda, tablette ve masaüstünde düzgün görünür — buna duyarlı (responsive) tasarım denir.

Temel kullanım

/* Varsayılan (geniş ekran) stiller */
.menu { display: flex; }

/* Ekran 768px veya daha darsa: */
@@media (max-width: 768px) {
  .menu { display: block; }
}

Sık kullanılan kırılma noktaları

  • max-width: 600px — telefon
  • max-width: 900px — tablet
  • min-width: 1200px — geniş masaüstü

Mobil öncelikli (mobile-first) yaklaşım

Modern yöntem önce mobil stilleri yazıp, ekran büyüdükçe min-width ile ekleme yapmaktır:

.kart { width: 100%; }

@@media (min-width: 768px) {
  .kart { width: 50%; }
}

Ayrıca sayfanın <head> kısmında <meta name='viewport' content='width=device-width, initial-scale=1'> etiketi olmadan media query'ler mobilde beklendiği gibi çalışmaz.