CSS Responsive Design: Mobile-First Yaklaşım

CSS Responsive Design: Mobile-First Yaklaşım

Responsive web tasarım, web sitelerinin farklı ekran boyutlarına ve cihazlara uyum sağlamasını ifade eder. Mobile-first yaklaşım ise önce küçük ekranlar için tasarlayıp, büyük ekranlara doğru genişletme stratejisidir. Bu rehberde modern responsive tasarımın temellerini, media query kullanımını, fluid tipografi ve layout tekniklerini derinlemesine inceleyeceğiz.

1. Mobile-First Yaklaşımın Temelleri

Mobile-first, CSS'i önce mobil cihazlar için yazıp, ardından min-width media query'leri ile daha büyük ekranlara stil ekleme stratejisidir. Bu yaklaşım hem performans hem de kullanıcı deneyimi açısından avantajlıdır çünkü mobil kullanıcılar gereksiz CSS yüklemez.

/* Mobile-First Temel Yapı */

/* 1. Mobil stiller (varsayılan — media query yok) */
.container {
  padding: 1rem;
  max-width: 100%;
}

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

.nav-menu {
  display: none; /* Mobilde hamburger menü */
}

/* 2. Tablet (768px ve üstü) */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
    max-width: 720px;
    margin: 0 auto;
  }

  .grid {
    grid-template-columns: repeat(2, 1fr); /* 2 sütun */
    gap: 1.5rem;
  }

  .nav-menu {
    display: flex; /* Menüyü göster */
  }
}

/* 3. Desktop (1024px ve üstü) */
@media (min-width: 1024px) {
  .container {
    max-width: 960px;
  }

  .grid {
    grid-template-columns: repeat(3, 1fr); /* 3 sütun */
    gap: 2rem;
  }
}

/* 4. Geniş ekran (1280px ve üstü) */
@media (min-width: 1280px) {
  .container {
    max-width: 1200px;
  }

  .grid {
    grid-template-columns: repeat(4, 1fr); /* 4 sütun */
  }
}

2. Fluid Typography ve Spacing

Sabit breakpoint'ler yerine, clamp() fonksiyonu ile sürekli ve akıcı şekilde değişen tipografi ve boşluklar oluşturabilirsiniz. Bu yöntem "kırılma noktaları" yerine yumuşak geçişler sağlar.

/* Fluid Typography — clamp() ile */
:root {
  /* clamp(minimum, tercih edilen, maksimum) */
  --font-size-sm: clamp(0.8rem, 0.17vw + 0.76rem, 0.89rem);
  --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
  --font-size-lg: clamp(1.25rem, 0.61vw + 1.1rem, 1.58rem);
  --font-size-xl: clamp(1.56rem, 1vw + 1.31rem, 2.11rem);
  --font-size-2xl: clamp(1.95rem, 1.56vw + 1.56rem, 2.81rem);
  --font-size-3xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
}

/* Fluid Spacing */
:root {
  --space-sm: clamp(0.5rem, 1vw, 1rem);
  --space-md: clamp(1rem, 2vw, 2rem);
  --space-lg: clamp(1.5rem, 3vw, 3rem);
  --space-xl: clamp(2rem, 5vw, 5rem);
}

/* Kullanım */
h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
p  { font-size: var(--font-size-base); }

section {
  padding: var(--space-xl) var(--space-md);
}

3. Responsive Images ve Media

Görseller responsive tasarımın en kritik parçalarından biridir. Doğru boyutta görsel sunmak hem performansı hem de kullanıcı deneyimini doğrudan etkiler. Modern HTML ve CSS bu konuda güçlü araçlar sunar.

/* Temel responsive image */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* object-fit ile kırpma kontrolü */
.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;    /* Oranı koru, kırp */
  object-position: center;
}

/* Art direction — <picture> elementi ile */
/* HTML:
<picture>
  <source media="(min-width: 1024px)" srcset="hero-wide.webp">
  <source media="(min-width: 768px)" srcset="hero-medium.webp">
  <img src="hero-mobile.webp" alt="Hero görsel">
</picture>
*/

/* Responsive Video Container */
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Modern: aspect-ratio ile */
.video-modern {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.video-modern iframe {
  width: 100%;
  height: 100%;
}

4. Container Queries ve Modern Teknikler

Media query'ler viewport genişliğine bağlıyken, container query'ler bir elemanın kendi container'ının boyutuna göre stil değiştirir. Bu, gerçek anlamda component bazlı responsive tasarım demektir.

/* Container Query Temeli */
.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

.card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* Container 500px'den genişse yatay düzen */
@container card (min-width: 500px) {
  .card {
    grid-template-columns: 200px 1fr;
  }
}

/* Responsive Table — Mobilde Card Görünümü */
@media (max-width: 768px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }

  thead {
    display: none; /* Başlıkları gizle */
  }

  td {
    position: relative;
    padding-left: 50%;
    text-align: left;
  }

  td::before {
    content: attr(data-label);
    position: absolute;
    left: 1rem;
    font-weight: 700;
  }
}

/* Responsive Navigation */
.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

@media (max-width: 768px) {
  .nav-links {
    flex-basis: 100%;
    order: 2;
    display: none;
  }

  .nav-links.active {
    display: flex;
    flex-direction: column;
  }
}

Sonuç

Modern responsive tasarım sadece media query'lerden ibaret değildir. Mobile-first yaklaşım, fluid tipografi, responsive görseller, container query'ler ve intrinsic design (içeriğe dayalı tasarım) teknikleri bir arada kullanılarak gerçek anlamda esnek ve uyumlu web siteleri oluşturulur. Önemli olan sabit breakpoint'lere takılmak değil, içeriğin her genişlikte iyi görünmesini sağlamaktır. Test ederken sadece belirli cihaz genişliklerini değil, tarayıcı penceresini sürekli yeniden boyutlandırarak her aralığı kontrol edin.

Kaynaklar

• MDN: Responsive Design
• web.dev: Responsive Web Design Basics
• Utopia — Fluid Type Scale Calculator
• Every Layout — Intrinsic Design Patterns