# Media Query

Adres: https://softwaredictionary.org/tr/terimler/media-query
Kategori: Web Geliştirme
Son güncelleme: 2026-09-30
Türkçe karşılığı: medya sorgusu
Okunuşu: midiya kuiri

Kısaca: Media query, stilleri yalnızca cihaz ya da tarayıcı ekran genişliği, yönelim veya koyu renk şeması gibi koşullara uyduğunda uygulayan CSS kuralıdır.

## Media query nedir?

Media query, bir stil sayfasının çalıştığı ortam hakkında "görüntü alanı en az 768 piksel genişliğinde mi?" ya da "kullanıcı koyu modu tercih ediyor mu?" gibi sorular sormasını ve yanıt evet olduğunda yalnızca bir CSS bloğunu uygulamasını sağlar. `@media` at-kuralı ve ardından bir veya daha fazla koşulla yazılır. Media query'ler, tek bir sayfanın telefonlara, tabletlere ve büyük monitörlere uyum sağladığı duyarlı tasarımın temel aracıdır.

En yaygın koşullar `min-width` ve `max-width` ile görüntü alanı genişliğini sınar; `@media (width >= 768px)` gibi yeni aralık söz dizimi ise tüm güncel tarayıcılarda çalışır. Diğer media özellikleri `orientation`'ı, dokunmatik ekranları farenden ayırmak için `hover` ve `pointer`'ı, koyu mod için `prefers-color-scheme`'i ve daha az animasyon isteyen kullanıcılar için `prefers-reduced-motion`'ı denetler. Koşullar `and`, virgül (yani "veya") ve `not` ile birleştirilebilir; JavaScript de aynı denetimleri `window.matchMedia()` ile yapabilir.

Media query'yi CSS için bir if ifadesi olarak düşünün: ekran genişse kenar çubuğunu içeriğin yanında göster, değilse alt alta diz. Popüler bir yaklaşım mobil öncelikli CSS'tir; temel stiller küçük ekranları hedefler, `min-width` sorguları ise içeriğin daha fazla yere ihtiyaç duyduğu genişliklerde, yani kırılma noktalarında (breakpoint) yerleşim ekler. Telefonlarda media query'ler yalnızca sayfada viewport meta etiketi, yani `<meta name="viewport" content="width=device-width, initial-scale=1">` varsa beklendiği gibi davranır.

Media query'ler çoğu zaman container query'lerle karıştırılır. Media query tüm görüntü alanına veya cihaza tepki verir; `@container` ile yazılan container query ise bir bileşenin üst öğesinin boyutuna tepki verir; böylece aynı kart dar bir kenar çubuğunda da geniş bir ana sütunda da uyum sağlayabilir. Media query'ler ayrıca duyarlı tasarımın yalnızca bir tekniğidir; Flexbox ve CSS Grid ile kurulan esnek yerleşimler, akışkan görseller ve göreli birimler de bu işin parçasıdır.

## Önemli noktalar

- Media query, cihaz veya görüntü alanı koşulları doğru olduğunda CSS uygular.
- Genişlik tabanlı sorgular, duyarlı yerleşimler için kırılma noktalarını tanımlar.
- `prefers-color-scheme` ve `prefers-reduced-motion` gibi tercih sorguları kullanıcı ayarlarına saygı gösterir.
- `window.matchMedia()` aynı denetimleri JavaScript'ten yapar.
- Container query'ler görüntü alanının değil, üst öğenin boyutuna tepki verir.

## Örnek: Mobil öncelikli kırılma noktaları ve kullanıcı tercihleri

```css
/* Mobile-first: base styles are for small screens */
.layout { display: block; }

/* From 768px wide, place the sidebar next to the content */
@media (min-width: 768px) {
  .layout { display: grid; grid-template-columns: 240px 1fr; }
}

/* Respect the user's system settings */
@media (prefers-color-scheme: dark) {
  body { background: #111; color: #eee; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
```

## Sık sorulan sorular

**Yaygın media query kırılma noktaları nelerdir?**

Resmî bir liste yoktur ve birçok ekip 640px, 768px, 1024px ve 1280px civarındaki değerleri kullanır. Belirli cihazları hedeflemektense, kendi içeriğinizin sıkışık görünmeye başladığı yere bir kırılma noktası eklemek genellikle daha iyidir.

**Media query'lerde min-width ile max-width arasındaki fark nedir?**

`min-width` stilleri o genişlikte ve üstünde uygular; bu, mobil öncelikli CSS'e uygundur. `max-width` ise stilleri o genişlikte ve altında uygular; bu da masaüstü öncelikli yazılmış CSS'e uygundur.

**Media query'm mobilde neden çalışmıyor?**

En yaygın neden, telefonun sayfayı masaüstü genişliğinde render etmesine yol açan eksik viewport meta etiketidir. Ayrıca media query'nin geçersiz kılması gereken kuralların ardından geldiğini de kontrol edin; çünkü aynı belirleyiciliğe sahip sonraki kural kazanır.

---

Software Dictionary: https://softwaredictionary.org/tr · https://softwaredictionary.org/tr/llms.txt