Responsive Tasarım

Telefon, tablet, bilgisayar - her ekranda mükemmel görünüm.

Bu Ne İşe Yarar?

Muzibu'yu telefonunuzda, tabletinizde veya bilgisayarınızda açın - her yerde düzgün çalışır! Ekran küçükse menüler daralır, butonlar büyür. Ekran genişse tüm detaylar görünür. Su gibi: Hangi kaba koyarsanız ona uyum sağlar.

Üç Ekran Boyutu

Mobil

< 768px

- Tek sütun görünüm
- Alt navigasyon barı
- Hamburger menü
- Büyük dokunma alanları

Tablet

768px - 1024px

- İki sütun grid
- Daraltılmış sol sidebar
- Sağ panel gizli
- Hibrit kontroller

Masaüstü

> 1024px

- Üç sütun layout
- Genişletilmiş sidebar
- Kuyruk paneli açık
- Klavye kısayolları

Mobil Dokunmatik Özellikler

Hamburger Menü

3 çizgi butonu

Sol üstteki butona dokun, menü açılır. Yerden tasarruf sağlar.

Touch-Friendly

44px minimum

Tüm butonlar en az 44x44 piksel. Parmakla rahat basılır.

Swipe Gesture

Kaydırma hareketleri

Sağa kaydır: Sonraki şarkı. Sola kaydır: Önceki şarkı.

Tam Ekran Player

Fullscreen mode

Mini player'a dokun, tam ekran açılır. Büyük albüm kapağı, kolay kontrol.

Değişen Elementler

Element	Mobil	Tablet	Masaüstü
Sol Sidebar	Gizli	İkon modu	Tam genişlik
Sağ Panel	Yok	Yok	Açık
Grid Sütun	2	3-4	5-6
Player	Mini bar	Kompakt	Tam kontrol
Navigasyon	Alt bar	Sol ikon	Sol menü

Bu Sayfanın Anahtar Terimleri

Responsive (Duyarlı)

Ekran boyutuna göre otomatik şekillenen tasarım. Tek site, tüm cihazlar.

Breakpoint (Kırılım Noktası)

Tasarımın değiştiği piksel değeri. 768px, 1024px gibi.

Hamburger Menu

Üç yatay çizgi şeklinde menü butonu. Mobilde yaygın kullanılır.

Swipe Gesture

Parmakla kaydırma hareketi. Dokunmatik ekranlarda navigasyon için kullanılır.

Arkaplanda Neler Çalışıyor?

Responsive tasarım farklı ekran boyutlarında çalışırken arka planda şu işlemler gerçekleşir:

1. Viewport Meta Tag

viewport meta tag ile tarayıcıya mobil optimizasyon yapılacağı bildirilir. width=device-width ile ekran genişliği alınır, initial-scale=1 ile zoom seviyesi belirlenir.

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

2. Tailwind Breakpoint Sistemi

sm:(640px), md:(768px), lg:(1024px), xl:(1280px) breakpoint'leri CSS'te media query olarak derlenir. Mobile-first yaklaşımla önce küçük ekran stilleri yazılır, sonra büyük ekranlar override edilir.

grid-cols-1 md:grid-cols-2 lg:grid-cols-4

3. CSS Grid ve Flexbox

Layout için CSS Grid (2D) ve Flexbox (1D) kullanılır. auto-fit ve minmax ile kartlar otomatik sığar. gap ile boşluklar sabit kalır, içerik esnektir.

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))

4. Responsive Görseller

srcset ve sizes attribute'ları ile farklı çözünürlükler için farklı görseller sunulur. Tarayıcı ekran boyutuna ve DPR'a göre en uygun görseli indirir.

srcset="cover-400.jpg 400w, cover-800.jpg 800w" sizes="(max-width: 600px) 400px, 800px"

5. Touch Event Handling

Mobilde swipe gesture'ları touchstart, touchmove, touchend eventleri ile algılanır. Player'da swipe ile şarkı değiştirme, sidebar'da swipe ile kapatma gibi özellikler çalışır.

@touchstart.passive="startSwipe" @touchend="endSwipe"

6. Resize Observer

JavaScript'te ekran boyutu değişikliği ResizeObserver ile izlenir. Sidebar otomatik kapanır, layout yeniden hesaplanır. Debounce ile gereksiz hesaplamalar önlenir.

new ResizeObserver(debounce(updateLayout, 100))