Responsive tasarım, sitenin her ekran boyutunda güzel görünmesidir. Anahtar araç media query'lerdir.

Temel media query

/* Varsayılan (masaüstü) stiller */
.menu { display: flex; gap: 20px; }

/* Ekran 600px'den darsa (telefon) */
@media (max-width: 600px) {
  .menu { flex-direction: column; }
}

Mobile-first yaklaşım

Önce mobil için yaz, sonra büyük ekranlar için min-width ile genişlet — daha temiz ve hızlıdır:

.kart { width: 100%; }
@media (min-width: 768px) {
  .kart { width: 50%; }
}

Unutma: viewport etiketi

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

Bu etiket olmadan telefonlar sayfayı küçültüp gösterir. Her HTML sayfasının <head>'inde bulunmalı.