@media Sorguları

Bu dersin sonunda ekran genişliğine, karanlık moda ve yazdırmaya göre farklı kurallar yazabileceksiniz.

@media nedir?

@media kuralı, içindeki CSS’in yalnızca belirli koşullarda çalışmasını sağlar. “Ekran en az 500 piksel genişse şu kuralları uygula” diyebilirsiniz.

@media (min-width: 500px) {
  .kutular {
    display: flex;
  }
}

Süslü parantezler iç içedir: Dıştaki @media kuralına, içteki normal kurala aittir.

Önizlemede denemek

Önizleme kutuları @media için tek başına bir pencere gibi davranır. Bilgisayardaysanız kod ile önizleme arasındaki ayracı sola sürükleyerek önizlemeyi genişletin. Kutular 500 pikselde yan yana geçer.

<div class="kutular">
  <div class="kutu">Bir</div>
  <div class="kutu">İki</div>
  <div class="kutu">Üç</div>
</div>

.kutular {
  display: grid;
  gap: 8px;
}

.kutu {
  padding: 16px;
  background-color: lightblue;
}

@media (min-width: 500px) {
  .kutular {
    grid-template-columns: repeat(3, 1fr);
  }

  .kutu {
    background-color: lightgreen;
  }
}

Telefondaysanız önizleme yeterince genişleyemez. Telefonunuzu yan çevirerek deneyebilir veya kodu kendi dosyanıza kopyalayabilirsiniz.

min-width ve max-width

• min-width: 700px Genişlik en az 700 piksel ise çalışır.
• max-width: 700px Genişlik en fazla 700 piksel ise çalışır.

Bir önceki derste gördüğünüz “önce mobil” yaklaşımında min-width kullanılır. Temel kurallar küçük ekranı anlatır, sorgular büyük ekran için ekleme yapar.

Sıra yine önemlidir. Sorgular özgüllüğü artırmaz, bu yüzden her zaman temel kuralların sonrasına yazılır. Birden çok min-width varsa küçükten büyüğe sıralanır:

.kart {
  padding: 12px;
}

@media (min-width: 600px) {
  .kart {
    padding: 20px;
  }
}

@media (min-width: 1000px) {
  .kart {
    padding: 32px;
  }
}

Kırılma noktalarını seçmek

Kuralın devreye girdiği genişliğe kırılma noktası denir. Belirli telefon modellerine göre seçmeyin, çünkü yüzlerce farklı boyut var.

Bunun yerine sayfanızı genişletin ve tasarımın bozulmaya başladığı yere kırılma noktası koyun. Başlangıç için sık kullanılan değerler şunlardır: 600px, 900px ve 1200px.

Durumlara göre sorgular

Sorgular yalnızca genişliğe bakmaz:

• (prefers-color-scheme: dark) Kullanıcı karanlık modu seçmiş.
• (prefers-reduced-motion: reduce) Kullanıcı hareketlerin azaltılmasını istemiş. Animasyonlar dersinde kullanacaksınız.
• (hover: hover) Cihaz fare gibi bir işaretçi kullanıyor.
• (orientation: landscape) Ekran yatay.

Birden çok koşul and ile birleştirilir:

@media (min-width: 600px) and (orientation: landscape) {
  .galeri {
    grid-template-columns: repeat(4, 1fr);
  }
}

Karanlık mod

Değişkenlerle birleşince karanlık mod birkaç satırdır. Yalnızca değişkenlerin değerini değiştirirsiniz, diğer kurallara dokunmazsınız.

Aşağıdaki önizleme, işletim sisteminizdeki açık veya koyu ayarını izler:

<div class="sayfa">
  <h2>Merhaba</h2>
  <p>Cihazınızın temasına uyum sağlıyorum.</p>
</div>

:root {
  --zemin: white;
  --yazi: #222222;
  --vurgu: teal;
}

@media (prefers-color-scheme: dark) {
  :root {
    --zemin: #1b1b1f;
    --yazi: #e8e8e6;
    --vurgu: gold;
  }
}

.sayfa {
  padding: 16px;
  background-color: var(--zemin);
  color: var(--yazi);
}

.sayfa h2 {
  color: var(--vurgu);
}

Yazdırma

@media print kuralları yalnızca sayfa yazdırılırken çalışır. Menüleri gizlemek ve mürekkep harcayan arka planları kaldırmak için kullanılır. Kendi sayfanızda Ctrl + P ile sonucu görebilirsiniz.

@media print {
  nav,
  footer {
    display: none;
  }

  body {
    background-color: white;
    color: black;
  }
}

<style>
  @media (min-width: 500px) {
    .kutular {
      display: flex;
    }
  }
</style>

<div class="kutular">
  <div>Bir</div>
  <div>İki</div>
</div>

<style>
  @media print {
    nav {
      display: none;
    }
  }
</style>

<nav>Menü</nav>
<p>İçerik</p>

Bu derste öğrendikleriniz

• @media içindeki kurallar yalnızca koşul sağlandığında çalışır.
• Önce mobil yaklaşımında min-width küçükten büyüğe, temel kuralların altına yazılır.
• Kırılma noktaları cihazlara göre değil, tasarımın bozulduğu yere göre seçilir.
• prefers-color-scheme ve değişkenler ile karanlık mod, @media print ile yazdırma görünümü yapılır.