Medya sorguları yanıt veren tasarımı nasıl sağlar?

Question

Accepted Answer

**Medya sorguları**, cihaz özelliklerine — çoğunlukla **görünüm alanı genişliğine** — dayalı olarak CSS'i koşullu olarak uygular ve tek bir stil sayfasının telefonlar, tabletler ve masaüstü bilgisayarlara uyum sağlamasını sağlar.

```css
/* base styles (mobile-first) */
.container { padding: 1rem; }

/* apply only when viewport is AT LEAST 768px wide */
@media (min-width: 768px) {
  .container { padding: 2rem; display: grid; grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .container { grid-template-columns: 1fr 1fr 1fr; }
}
```

## Mobil-öncelikli (min-width) vs masaüstü-öncelikli (max-width)

```css
/* ✅ mobile-first: base = mobile, layer on enhancements as it gets wider */
@media (min-width: 768px) { ... }

/* desktop-first: base = desktop, override down for smaller screens */
@media (max-width: 767px) { ... }
```

**Mobil-öncelikli** (`min-width`) genellikle tercih edilir: küçük ekranlar için basit temel stilleri yazarsınız, ardından daha büyük ekranlar için giderek karmaşıklık eklersiniz. Bu, genellikle daha temiz, hafif CSS üretir ve içeriğin nasıl yeniden akış yaptığıyla eşleşir.

## Diğer yararlı sorgular

```css
@media (max-width: 600px) { }                 /* small screens */
@media (orientation: landscape) { }            /* device orientation */
@media (prefers-color-scheme: dark) { }        /* user wants dark mode */
@media (prefers-reduced-motion: reduce) { }    /* user dislikes animation — accessibility */
@media print { }                                /* print stylesheet */
```

`prefers-reduced-motion` ve `prefers-color-scheme` ekran boyutuna değil, kullanıcı *tercihleri*ne yanıt verir — erişilebilirlik ve tema için önemlidir.

## Koşulları birleştirme

```css
@media (min-width: 768px) and (max-width: 1023px) { /* tablets only */ }
```

## Gelecek hakkında bir not: konteyner sorguları

Mediaya sorguları **görünüm alanına** yanıt verir; daha yeni **konteyner sorguları** (`@container`) *üst öğenin* boyutuna yanıt verir — gerçekten yeniden kullanılabilir bileşenler için daha iyi. Medya sorgularını değiştirmek yerine bunları tamamlarlar.

## Neden önemli

Mediaya sorguları yanıt veren tasarımın temelini oluşturur — ekran boyutuna göre düzeni, boşluğu ve sütunları uyarlama.

Mobil-öncelikli `min-width` yaklaşımı CSS'yi yönetilebilir tutar ve tercih sorguları (`prefers-reduced-motion`, `prefers-color-scheme`) yanıt veren tasarımı erişilebilirlik ve temaya genişletir.