Çalıştırılabilir CSS Dokümanları: Medya sorguları

Q: Medya sorgum telefonda neden çalışmıyor?

En yaygın neden eksik bir viewport meta etiketidir. olmadan mobil tarayıcılar sayfanın yaklaşık 980px genişliğinde olduğunu varsayar, bu yüzden küçük genişlik sorguları hiç eşleşmez. Ayrıca sorgunun ezdiği kurallardan sonra geldiğini kontrol et.

Q: Karanlık mod için medya sorgusu nasıl yazılır?

@media (prefers-color-scheme: dark) { ... } kullan. Kullanıcının işletim sistemi ya da tarayıcısı karanlık bir temaya ayarlı olduğunda eşleşir ve içinde renkleri ya da CSS değişkenlerini ezebilirsin.

Q: Medya sorguları ile container query'ler arasındaki fark nedir?

Bir medya sorgusu viewport'u (bütün pencereyi) test eder. @container ile yazılan bir container query ise container-type: inline-size ile işaretlediğin bir ebeveyn elementin boyutunu test eder. Aynı sayfada hem geniş hem dar yerlerde görünen bir bileşen için container query kullan.

Tek örnekte bir medya sorgusu

Bir medya sorgusu CSS'i bir koşulla sarar. @media (min-width: 600px) içindeki kurallar yalnızca viewport en az 600px genişliğindeyken uygulanır:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Media query</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .banner { padding: 16px; background: #f59e0b; color: #111827; }
    .banner::after { content: " (narrow: under 600px)"; }

    @media (min-width: 600px) {
      .banner { background: #2563eb; color: white; }
      .banner::after { content: " (wide: 600px or more)"; }
    }
  </style>
</head>
<body>
  <p class="banner">This box changes color at 600px</p>
  <p id="w"></p>
  <script>
    const show = () => { document.getElementById('w').textContent = 'This preview is ' + window.innerWidth + 'px wide.'; };
    addEventListener('resize', show);
    show();
  </script>
</body>
</html>

Önizleme bir çerçevedir ve içindeki bir medya sorgusu senin ekranını değil çerçeveyi ölçer. Masaüstünde bu makale sütunu kadar geniştir, genellikle 600px'ten fazla, bu yüzden kutu mavidir. Tarayıcı pencereni çerçeve 600px'in altına düşecek kadar daralt, kehribar rengine döner; kutunun altındaki satır çerçevenin genişliğini canlı bildirir. Bir telefonda çerçeve zaten dardır, bu yüzden kehribar rengi sürümü görürsün.

@media söz dizimi

@media (min-width: 600px) { ... }                        /* one condition */
@media (min-width: 600px) and (max-width: 899px) { ... } /* both must be true */
@media (max-width: 599px), print { ... }                 /* either one (comma = or) */
@media not print { ... }                                 /* negation */
@media screen and (orientation: landscape) { ... }       /* media type plus a feature */
@media (width >= 600px) { ... }                          /* range syntax */
@media (600px <= width < 900px) { ... }                  /* a range with both ends */

and iki yanında da boşluk ister: (min-width: 600px)and(max-width: 900px) geçersizdir ve bütün sorgu yok sayılır. Aralık söz dizimi (width >= 600px) güncel Chrome, Firefox ve Safari'de desteklenir ve özellikle "şuna kadar ama dahil değil" için min-width'ten daha anlaşılır okunur.

En çok kullanacağın özellikler:

Özellik	Ne zaman eşleşir	Örnek
`min-width` / `width >=`	viewport en az bu kadar genişse	`(min-width: 768px)`
`max-width` / `width <=`	viewport en fazla bu kadar genişse	`(max-width: 767px)`
`orientation`	`portrait` (genişliğinden uzun) ya da `landscape`	`(orientation: landscape)`
`hover`	ana işaretçi üzerine gelebiliyorsa (`hover`) ya da gelemiyorsa (`none`, çoğu dokunmatik ekran)	`(hover: hover)`
`pointer`	ana işaretçi `fine` (fare) ya da `coarse` (parmak) ise	`(pointer: coarse)`
`prefers-color-scheme`	kullanıcı `dark` ya da `light` bir tema seçtiyse	`(prefers-color-scheme: dark)`
`prefers-reduced-motion`	kullanıcı sistemden daha az hareket istediyse	`(prefers-reduced-motion: reduce)`
`print` (bir medya türü)	sayfa yazdırılıyor ya da PDF olarak kaydediliyorsa	`@media print`

Mobil öncelik: min-width breakpoint'leri

Telefon düzenini temel CSS olarak yaz, sonra alan büyüdükçe düzeni değiştiren min-width sorguları ekle. Her sorgu yalnızca neyin değiştiğini tarif etmek zorundadır:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mobile first</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .cards { display: grid; grid-template-columns: 1fr; gap: 10px; }
    .cards div { background: #16a34a; color: white; padding: 18px; border-radius: 6px; }

    @media (min-width: 480px) {
      .cards { grid-template-columns: 1fr 1fr; }
    }
    @media (min-width: 720px) {
      .cards { grid-template-columns: 1fr 1fr 1fr; }
    }
  </style>
</head>
<body>
  <div class="cards"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div>
  <p id="out"></p>
  <script>
    const show = () => {
      const n = getComputedStyle(document.querySelector('.cards')).gridTemplateColumns.split(' ').length;
      document.getElementById('out').textContent = innerWidth + 'px wide: ' + n + ' column(s)';
    };
    addEventListener('resize', show);
    show();
  </script>
</body>
</html>

Geniş bir masaüstü penceresinde önizleme 720px'in üzerindedir, bu yüzden üç sütun görürsün; ızgaranın altındaki satır genişliği ve sütun sayısını bildirir. Pencereyi daralt, 720px'in altında ikiye, 480px'in altında bire düşer. İki sorgunun sırası önemlidir: geniş bir ekranda ikisi de doğrudur ve sonraki kazanır, bu yüzden min-width sorguları küçükten büyüğe gider. (max-width sorgularında tersidir: önce en büyük.)

Breakpoint seçmek

Resmi bir liste yoktur. Bunlar yaygın değerler ve genellikle neyi ayırdıkları:

Breakpoint	Genellikle
`min-width: 640px`	yatay tutulan büyük telefonlar, küçük tabletler
`min-width: 768px`	dikey tutulan tabletler
`min-width: 1024px`	yatay tutulan tabletler, küçük dizüstü bilgisayarlar
`min-width: 1280px`	masaüstleri

Daha iyi bir yöntem: dar düzenle başla, bir şey kötü görünene kadar pencereyi genişlet (fazla uzun satırlar, fazla geniş kartlar) ve oraya bir breakpoint koy. Çoğu sayfa için iki ya da üç breakpoint yeterlidir. Çoğu zaman hiç gerekmez: grid'de repeat(auto-fit, minmax(200px, 1fr)), flex-wrap ve clamp() kesintisiz uyum sağlar.

Her sayfanın viewport meta etiketine ihtiyacı var

<head> içinde bu etiket olmadan telefon tarayıcıları sayfayı ekran yaklaşık 980px genişliğindeymiş gibi yerleştirir ve sonra uzaklaştırır, bu yüzden min-width: 480px sorgun her zaman doğrudur ve telefon düzenin hiç görünmez:

<meta name="viewport" content="width=device-width, initial-scale=1">

İçindeki her değeri meta viewport sayfası açıklıyor.

prefers-color-scheme ile karanlık mod

prefers-color-scheme, işletim sisteminin açık ya da karanlık ayarını takip eder. Onu kullanmanın en temiz yolu renkleri CSS değişkenlerinde tutmak ve sorgunun içinde yalnızca değişkenleri değiştirmektir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Dark mode</title>
  <style>
    :root { --bg: #ffffff; --text: #111827; --card: #e5e7eb; }

    @media (prefers-color-scheme: dark) {
      :root { --bg: #111827; --text: #f9fafb; --card: #1f2937; }
    }

    /* A theme toggle sets the same variables by hand */
    :root[data-theme="dark"] { --bg: #111827; --text: #f9fafb; --card: #1f2937; }
    :root[data-theme="light"] { --bg: #ffffff; --text: #111827; --card: #e5e7eb; }

    body { background: var(--bg); color: var(--text); font-family: system-ui, sans-serif; padding: 12px; }
    .card { background: var(--card); padding: 16px; border-radius: 8px; }
  </style>
</head>
<body>
  <div class="card">This card follows your system setting, or the button.</div>
  <p><button id="toggle">Switch theme</button></p>
  <p id="out"></p>
  <script>
    const mq = matchMedia('(prefers-color-scheme: dark)');
    const root = document.documentElement;
    const show = () => {
      document.getElementById('out').textContent =
        'Dark mode query matches: ' + mq.matches + '. Theme: ' + (root.dataset.theme || 'system');
    };
    document.getElementById('toggle').addEventListener('click', () => {
      const dark = root.dataset.theme ? root.dataset.theme === 'dark' : mq.matches;
      root.dataset.theme = dark ? 'light' : 'dark';
      show();
    });
    mq.addEventListener('change', show);
    show();
  </script>
</body>
</html>

Bu önizlemede sistemin karanlık moddayken bile sorgu false yazdırabilir: Chrome, sistem ayarını bunun gibi sandbox içindeki bir frame'e aktarmaz. Buton aynı değişkenleri elle değiştirir; bir sitenin tema düğmesi de böyle çalışır. :root[data-theme], sorgunun içindeki sade :root'tan daha özgüldür, bu yüzden okuyucunun seçimi sistemin önüne geçer. Sorgunun sistemini takip ettiğini görmek için örneği dosya olarak kaydedip aç.

Script, medya sorgularının ikinci yarısını gösteriyor: matchMedia() aynı sorguyu JavaScript'ten çalıştırır, şu anda eşleşip eşleşmediğini döndürür ve cevap değiştiğinde bir change olayı tetikler. Yalnızca stil değil davranış da ekrana bağlı olduğunda kullan, örneğin dokunmatik cihazlarda bir menüyü farklı açmak için.

Hareket de aynı şekilde çalışır. Büyük ya da döngüsel animasyonları, animasyon sayfasında gösterildiği gibi prefers-reduced-motion kontrolüyle sar.

Container query'ler: kararı bileşen verdiğinde

Bir medya sorgusu yalnızca viewport'u bilir. Aynı sayfada hem geniş bir ana sütunda hem dar bir kenar çubuğunda duran bir kartın bunun yerine kendi alanını bilmesi gerekir. İşte bu bir container query'dir: ebeveyni container-type: inline-size ile işaretle, sonra aynı koşullarla @container kullan.

Yeniden boyutlandırmak için gri kutunun köşesini sürükle. Kart, pencere boyutu ne olursa olsun kutunun 360px genişliğinde düzen değiştirir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Container query</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .holder {
      container-type: inline-size;
      resize: horizontal;
      overflow: hidden;
      width: 480px;
      max-width: 100%;
      min-width: 160px;
      padding: 8px;
      background: #e5e7eb;
    }
    .card { display: grid; gap: 10px; background: white; padding: 10px; border-radius: 8px; }
    .pic { height: 70px; background: #2563eb; border-radius: 6px; }

    @container (min-width: 360px) {
      .card { grid-template-columns: 120px 1fr; }
    }
  </style>
</head>
<body>
  <div class="holder">
    <div class="card"><div class="pic"></div><p>Image beside the text when the box is 360px or wider, above it when narrower.</p></div>
  </div>
</body>
</html>

Başlangıçtaki 480px'te resim metnin yanında duruyor. Kutuyu 376px'ten dar sürükle (360px içerik artı her iki yanda 8px padding), resim metnin üstüne geçer. Container query'ler bütün güncel büyük tarayıcılarda çalışır.

Yazdırma için stiller

@media print yalnızca sayfa yazdırılırken ya da PDF olarak kaydedilirken uygulanır. Gezinmeyi ve butonları gizle, beyaz üzerine koyu metin kullan:

@media print {
  nav, .ad, button { display: none; }
  body { color: black; background: white; }
  a::after { content: " (" attr(href) ")"; } /* print the URL after each link */
}

Sık yapılan hatalar

Viewport meta etiketi yok. Telefonlar bu durumda geniş bir düzen viewport'u bildirir ve küçük ekran sorguları hiç eşleşmez.
Yanlış sıradaki sorgular. Aynı seçiciye sahip iki doğru sorgu: sonraki kazanır. min-width sorgularını küçükten büyüğe sırala.
Çakışan ya da boşluk bırakan sınırlar. max-width: 768px ve min-width: 768px tam 768px'te ikisi de eşleşir. Birinde 767px kullan ya da aralık söz dizimiyle (width < 768px) ve (width >= 768px) yaz.
and'den sonra boşluk yok. and( geçersizdir ve sorgu sessizce atılır.
Yalnızca bir masaüstü penceresini boyutlandırarak test etmek. Gerçek bir telefonu ya da telefonun viewport'unu, piksel oranını ve dokunmayı uygulayan tarayıcının cihaz modunu da kontrol et.
Çok fazla breakpoint. Her bileşenin kendi breakpoint'ine ihtiyacı varsa bunun yerine grid auto-fit, flex-wrap ya da container query'leri dene.

Sıkça Sorulan Sorular

CSS'te medya sorgusu nedir?

İçindeki CSS'i yalnızca cihaz ya da pencereyle ilgili bir koşul doğru olduğunda uygulayan bir kuraldır. @media (min-width: 600px) { ... } stillerini yalnızca viewport en az 600px genişliğindeyken uygular; tek bir sayfa telefonlardan masaüstlerine böyle uyum sağlar.

min-width mı yoksa max-width medya sorguları mı kullanmalıyım?

Çoğu site mobil öncelikli yazar: temel CSS küçük ekranlar içindir ve ekran büyüdükçe min-width sorguları düzen ekler. max-width sorguları masaüstü düzeninden başlayarak ters yönde çalışır. İkisi de çalışır; ikisini aynı elementte karıştırmak sınırlarda çakışmalara ve boşluklara yol açar.

Standart medya sorgusu breakpoint'leri nelerdir?

Resmi bir standart yoktur. Yaygın seçimler 640px, 768px, 1024px ve 1280px civarıdır, ama daha iyi kural, kendi düzeninin kötü görünmeye başladığı yere bir breakpoint eklemek ve breakpoint sayısını az tutmaktır.

Medya sorgum telefonda neden çalışmıyor?

En yaygın neden eksik bir viewport meta etiketidir. <meta name="viewport" content="width=device-width, initial-scale=1"> olmadan mobil tarayıcılar sayfanın yaklaşık 980px genişliğinde olduğunu varsayar, bu yüzden küçük genişlik sorguları hiç eşleşmez. Ayrıca sorgunun ezdiği kurallardan sonra geldiğini kontrol et.

Karanlık mod için medya sorgusu nasıl yazılır?

@media (prefers-color-scheme: dark) { ... } kullan. Kullanıcının işletim sistemi ya da tarayıcısı karanlık bir temaya ayarlı olduğunda eşleşir ve içinde renkleri ya da CSS değişkenlerini ezebilirsin.

Medya sorguları ile container query'ler arasındaki fark nedir?

Bir medya sorgusu viewport'u (bütün pencereyi) test eder. @container ile yazılan bir container query ise container-type: inline-size ile işaretlediğin bir ebeveyn elementin boyutunu test eder. Aynı sayfada hem geniş hem dar yerlerde görünen bir bileşen için container query kullan.

İlgili kavramlar