01. Temel Prensipler
Viewport Meta Etiketi
Tarayıcıya sayfanın nasıl ölçekleneceğini söyleyen kritik satır. Olmazsa olmazdır.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Mobile-First Stratejisi
Tasarımı en küçük ekran için yapıp yukarı doğru genişletmek. Bu, kodun daha temiz ve performanslı olmasını sağlar.
Breakpoint (Kırılma Noktaları)
02. Modern Düzen Teknolojileri
Flexbox
Tek boyutlu (satır veya sütun) hizalamalar için mükemmeldir. İçerik odaklı hizalamalarda rakipsizdir.
CSS Grid
İki boyutlu (satır ve sütun aynı anda) kompleks düzenler için kullanılır. Tüm sayfa iskeletini yönetmekte en güçlü araçtır.
Akışkan Tipografi ve Birimler
Sadece kutuları değil, yazıları ve görselleri de duyarlı hale getiriyoruz. Sabit px yerine esnek birimler kullanıyoruz.
Performans ve Erişilebilirlik
Görsel Yönetimi
Duyarlı görseller için <picture> etiketi kullanarak cihaza uygun boyutlu resmi servis edin.
Dokunmatik Hedefler
Buton ve linklerin mobil cihazlarda en az 44x44px boyutunda olmasını sağlayın (Fat Finger Error önleme).
Tipografi Ölçekleme
Küçük ekranlarda satır arası boşluğunu (line-height) ve kontrastı artırarak okunabilirliği koruyun.