# Duyarlı Tasarım

Adres: https://softwaredictionary.org/tr/terimler/responsive-design
Kategori: Web Geliştirme
Son güncelleme: 2026-09-30
İngilizcesi: Responsive Design
Okunuşu: rispansiv dizayn

Kısaca: Duyarlı tasarım, web sayfalarının yerleşimini, görsellerini ve metnini telefondan büyük monitöre her ekran boyutuna otomatik uyduran yaklaşımdır.

## Duyarlı tasarım (responsive design) nedir?

Duyarlı tasarım, ayrı mobil ve masaüstü sürümleri yerine her cihazda iyi çalışan tek bir web sitesi oluşturmak demektir. Yerleşim, kullanılabilir alan değiştikçe kendini yeniden düzenler: geniş ekranda üç sütunlu bir ızgara telefonda tek sütuna dönüşebilir, tam bir gezinme çubuğu da bir menü düğmesine daralabilir.

Birkaç temel tekniğe dayanır. CSS Flexbox ve Grid ile kurulan esnek yerleşimler, sabit piksel genişlikleri yerine yüzde, `rem` ve `fr` gibi göreli birimler kullanır; media query'ler belirli ekran genişliklerinin üstünde ya da altında (kırılma noktaları, breakpoint) farklı stiller uygular; duyarlı görseller ise her cihazın uygun boyutta bir dosya indirmesi için `srcset` kullanır. Container query'ler bir adım daha ileri giderek bir bileşenin tüm ekrana değil, üst öğesinin boyutuna uyum sağlamasına izin verir.

Yaygın bir strateji mobil öncelikli (mobile-first) yaklaşımdır: temel stiller küçük ekranlar için yazılır, ardından büyük ekranlarda yerleşimi geliştirmek için `min-width` içeren media query'ler eklenir. Suyun içine konulduğu bardağın şeklini alması gibi düşünün; içerik aynı kalır ama düzeni kabına uyar. Sayfanın ayrıca viewport meta etiketine, yani `<meta name="viewport" content="width=device-width, initial-scale=1">` etiketine ihtiyacı vardır; aksi halde mobil tarayıcılar onu küçültülmüş bir masaüstü sayfası olarak gösterir.

Duyarlı tasarım sıklıkla uyarlanabilir tasarımla (adaptive design) karıştırılır. Uyarlanabilir tasarım, belirli ekran boyutları için hazırlanmış birkaç sabit yerleşimi sunar; duyarlı tasarım ise tüm boyutlar arasında akıcı biçimde geçiş yapar. Google gibi arama motorları sayfaların önce mobil sürümünü dizine eklediği için telefonlarda kötü çalışan bir site aramada da daha aşağıda çıkabilir.

## Önemli noktalar

- Tek bir duyarlı site telefonlara, tabletlere ve masaüstlerine uyum sağlar.
- Esnek yerleşimler, göreli birimler ve media query'ler temel araçlardır.
- Mobil öncelikli olmak, önce küçük ekranlar için stil yazıp sonra geliştirmek demektir.
- Doğru mobil görünüm için viewport meta etiketi gereklidir.
- Container query'ler bileşenlerin kendi kullanılabilir alanlarına tepki vermesini sağlar.

## Örnek: Mobil öncelikli duyarlı bir ızgara

```css
/* Mobile first: one column by default */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* On screens at least 768px wide, switch to three columns */
@media (min-width: 768px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

/* Images shrink to fit their container instead of overflowing */
img { max-width: 100%; height: auto; }
```

## Sık sorulan sorular

**Duyarlı ile uyarlanabilir tasarım arasındaki fark nedir?**

Duyarlı tasarım, her ekran genişliğine sürekli olarak uyum sağlayan akışkan yerleşimler kullanır. Uyarlanabilir tasarım ise ekran boyutunu algılar ve belirli genişlikler için hazırlanmış birkaç sabit yerleşimden birini sunar.

**Duyarlı tasarımda breakpoint (kırılma noktası) nedir?**

Breakpoint, yerleşimin değiştiği ve `@media (min-width: 768px)` gibi bir CSS media query ile tanımlanan ekran genişliğidir. İyi kırılma noktaları belirli cihaz modellerine göre değil, içeriğin sıkışık görünmeye başladığı yere göre seçilir.

**Mobil öncelikli (mobile-first) ne demektir?**

Varsayılan stilleri küçük ekranlar için yazmak ve büyük ekranlara yönelik kuralları `min-width` media query'leriyle eklemek demektir. Mobil sayfaları daha hafif tutar ve en önemli içeriğe öncelik vermenizi teşvik eder.

---

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