Media Query

Q: 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.

Türkçe karşılığı: medya sorgusu
Okunuşu: midiya kuiri

Günlük kullanımda çoğunlukla İngilizcesi tercih edilir.

Güncellendi 30 Eylül 20262 dk okuma

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ı tercihlericss

/* 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.

İlgili sayfalar

Bu sayfada bir hata ya da eksik mi gördünüz?Düzeltme önerin