Media Query Nedir?

Media query nedir?

Media query, CSS'e "şu koşulda şu kuralları uygula" demenin yoludur. Koşul çoğunlukla ekran genişliğidir, ama yön (dikey veya yatay), çözünürlük, yazdırma modu ya da kullanıcının karanlık tema tercihi de olabilir. Responsive tasarım büyük ölçüde bu yapıya dayanır.

Sözdizimi @media ile başlar. Parantez içine koşul yazılır, süslü parantezlerin içine de o koşulda geçerli olacak kurallar konur.

Nasıl yazılır?

Basit bir örnek düşünelim. Masaüstünde yan yana duran üç ürün kartının, 600 pikselden dar ekranlarda alt alta dizilmesi isteniyor:

.kartlar { display: flex; }
@media (max-width: 600px) {
  .kartlar { flex-direction: column; }
}

Bu kodda max-width: 600px koşulu, ekran 600 piksel veya daha dar olduğunda geçerli olur. Değerin değiştiği bu noktalara "kırılma noktası" (breakpoint) denir. Pek çok projede telefon, tablet ve masaüstü için üç dört kırılma noktası kullanılır.

Nelere dikkat etmeli?

"Önce mobil" yaklaşımında temel kurallar dar ekran için yazılır, geniş ekranlar min-width koşuluyla eklenir. Bu yöntem, telefonda gereksiz kuralların yüklenmesini azaltır ve kodu sadeleştirir.

Kırılma noktalarını belirli cihaz modellerine göre değil, içeriğin bozulduğu genişliğe göre seçmek daha sağlıklıdır. Sayfayı yavaşça daraltıp düzenin nerede kötüleştiğine bakın, kuralı oraya ekleyin. Ayrıca prefers-color-scheme gibi tercih sorgularıyla karanlık mod desteği de eklenebilir.