Responsive Web Design (Duyarlı Web Tasarımı), tek bir kod tabanıyla, her ekran boyutunda mükemmel görünen ve kullanılabilen web siteleri oluşturmaya denir. Hadi başlayalım.

1. Responsive Tasarımın Temel Prensipleri

Duyarlı bir tasarım üç temel teknik üzerine kuruludur:

Esnek Düzenler (Flexible Layouts): Sabit piksel (px) birimleri yerine yüzde (%), vw (viewport width), vh (viewport height) gibi göreceli birimler kullanmak.

Esnek Medya (Flexible Media): Resim ve videoların da konteynırlarına sığacak şekilde esnek olmasını sağlamak.

Medya Sorguları (Media Queries): Farklı ekran genişliklerine farklı CSS kuralları uygulayabilmek.

2. Medya Sorguları (Media Queries) Nedir?

Medya Sorguları, CSS3 ile gelen ve cihazın özelliklerine (ekran genişliği, yüksekliği, yönü vb.) göre farklı stiller uygulamamızı sağlayan bir tekniktir. Breakpoint (kırılma noktaları) denilen ekran genişliklerinde stil kurallarını değiştiririz.

Temel Syntax: 

@media medya_tipi and (koşul) {
  /* Uygulanacak CSS Kuralları */
}

En yaygın kullanım: Ekran genişliğine göre sorgu yapmak: 

/* MOBİL FIRST (Varsayılan stiller mobil içindir) */

/* Küçük tabletler (600px ve üzeri) */
@media screen and (min-width: 600px) {
  body {
    background-color: lightgreen;
  }
  .kutu { width: 50%; }
}

/* Tabletler (768px ve üzeri) */
@media screen and (min-width: 768px) {
  body {
    background-color: lightblue;
  }
  .kutu { width: 33.33%; }
}

/* Masaüstü (992px ve üzeri) */
@media screen and (min-width: 992px) {
  body {
    background-color: lavender;
  }
  .kutu { width: 25%; }
}

/* Büyük ekranlar (1200px ve üzeri) */
@media screen and (min-width: 1200px) {
  body {
    background-color: wheat;
  }
  .kutu { width: 20%; }
}

3. Mobile First Tasarım Nedir? Neden Önemlidir?

  • Mobile First (Önce Mobil): Tasarım ve kodlamaya en küçük ekrandan (mobil) başlayıp, ekran büyüdükçe (min-width) ekstra stiller ve düzenler ekleme felsefesidir.
  • Avantajları:
    • Performans: Mobil cihazlar, masaüstü stillerini yüklemek zorunda kalmaz.
    • Odaklanma: En önemli içeriği öne çıkarmaya zorlar, gereksiz detayları elersiniz.
    • Google Tercihi: Google, arama sıralamalarında mobile-first indekslemeyi kullanır.

4. Flexbox ve Grid ile Responsive Düzenler

Flexbox ve Grid, responsive tasarımın olmazsa olmaz araçlarıdır. Medya sorguları ile birlikte kullanıldıklarında inanılmaz esnek düzenler oluşturabilirsiniz.

Flexbox ile Responsive Navbar Örneği: 

/* MOBİL: Menü öğeleri alt alta */
.nav {
    display: flex;
    flex-direction: column;
}

/* TABLET ve ÜSTÜ: Menü öğeleri yan yana */
@media screen and (min-width: 768px) {
    .nav {
        flex-direction: row;
        justify-content: space-around;
    }
}

CSS Grid ile Responsive Grid Layout: 

.grid-container {
    display: grid;
    grid-template-columns: 1fr; /* Mobil: 1 sütun */
    gap: 1rem;
}

/* Tablet: 2 sütun */
@media screen and (min-width: 768px) {
    .grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Masaüstü: 4 sütun */
@media screen and (min-width: 992px) {
    .grid-container {
        grid-template-columns: repeat(4, 1fr);
    }
}

5. Responsive Resimler ve Medya

Resimlerin ve videoların taştığı (overflow) responsive sitelerin en yaygın sorunudur. Çözüm çok basit: 

img, video, iframe {
    max-width: 100%; /* Konteynırından geniş olamaz */
    height: auto; /* Orantıları korur */
}

6. Görünürlüğü Kontrol Etme (Gelişmiş Bir Teknik)

Bazen bir elementi belirli ekran boyutlarında göstermek/gizlemek isteriz. 

.mobilde-goster {
    display: block;
}
.masaustunde-goster {
    display: none;
}

@media screen and (min-width: 768px) {
    .mobilde-goster {
        display: none;
    }
    .masaustunde-goster {
        display: block;
    }
}