Media Query Nedir?

Bir media query'nin parçaları

Her media query üç parçadan oluşabilir: isteğe bağlı bir medya türü (screen, print veya varsayılan all), parantez içinde yazılan medya özellikleri ve bunları bağlayan mantıksal operatörler (and, not, or, virgül). Eskiden kullanılan tv, handheld gibi türlerin çoğu artık kullanımdan kaldırılmış durumda.

/* Klasik yazım */
@media screen and (min-width: 48rem) and (max-width: 64rem) { … }

/* Aralık (range) sözdizimi: aynı koşul, daha okunaklı */
@media (48rem <= width <= 64rem) { … }

/* Baskı çıktısı için */
@media print {
  nav, .cerez-bandi { display: none; }
}

Aralık sözdizimi, min-/max- öneklerinin kafa karıştıran "dahil mi, değil mi" sorusunu ortadan kaldırır: <= sınırı kapsar, < kapsamaz. Güncel tarayıcıların tamamı bu yazımı 2023'ten beri destekliyor.

Ekran boyutunun ötesi: kullanıcı tercihleri

Media query'ler yalnızca genişlik ölçmek için değildir. İşletim sisteminde yapılan erişilebilirlik ve görünüm ayarlarını okuyabilen tek CSS aracıdır:

• prefers-reduced-motion: Kullanıcı sistemde animasyonları azaltmayı seçmişse reduce döner. Vestibüler rahatsızlığı olan kişiler için büyük kayma, yakınlaştırma ve paralaks efektleri ciddi sorun yaratabilir.
• prefers-color-scheme: Açık veya koyu tema tercihi.
• prefers-contrast: Daha yüksek ya da daha düşük kontrast isteği.
• hover ve pointer: Birincil giriş aracının üzerine gelme (hover) yapıp yapamadığı ve ne kadar hassas olduğu. Dokunmatik ekranda yalnızca hover ile açılan bir menü erişilemez kalır.

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Bu tür sorgular web erişilebilirliği açısından küçük ama etkili bir adımdır. Hareket tercihi hakkında ayrıntılar MDN'de anlatılıyor.

CSS dışında media query

Aynı koşul dili HTML'de ve JavaScript'te de geçerlidir. <picture> içindeki <source media="(width >= 60rem)"> ile geniş ekranda farklı bir kırpım sunulabilir; bu, duyarlı görseller tekniğinin parçasıdır. <link rel="stylesheet" media="print"> baskı stilini ayrı tutar. JavaScript'te window.matchMedia("(prefers-color-scheme: dark)") bir koşulun o anki durumunu verir ve değişikliği dinlemeye izin verir.

Media query mi, container query mi?

Sık yapılan hatalar

• Cihaza göre breakpoint seçmek. "iPhone genişliği" gibi değerler her yıl değişir. Breakpoint'i içeriğin bozulmaya başladığı noktada koymak daha kalıcıdır.
• Viewport meta etiketini unutmak. <meta name="viewport" content="width=device-width, initial-scale=1"> yoksa mobil tarayıcı sayfayı geniş bir sanal pencerede çizer ve genişlik sorguları beklenen değeri görmez. Ayrıntı için viewport maddesine bakılabilir.
• Masaüstünden başlayıp her şeyi geri almak. max-width sorgularıyla geniş düzeni küçük ekranda tek tek iptal etmek, stil dosyasını şişirir. Mobile-first yaklaşımda temel stil dar ekran içindir, min-width sorguları yalnızca ekleme yapar.
• Piksel yerine em/rem kullanmamak. em tabanlı breakpoint'ler, kullanıcı tarayıcıda yazı boyutunu büyüttüğünde düzenin de buna uyum sağlamasına yardım eder.