Responsive tasarım, sayfanın her ekran boyutunda (telefon, tablet, bilgisayar) düzgün görünmesini sağlar.

Viewport meta etiketi

HTML'e bunu eklemek mobil için şarttır.

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

Media query

Ekran küçüldüğünde farklı stil uygula.

@media (max-width: 600px) {
  .menu {
    flex-direction: column;
  }
}

Esnek birimler

Sabit px yerine %, rem ve esnek düzen kullan.

.kutu {
  width: 100%;
  max-width: 500px;
}

İpuçları

  • Mobil öncelikli (mobile-first) tasarla, sonra büyük ekranlara genişlet.
  • Sabit genişlikler yerine esnek birimler kullan.
  • Farklı ekran boyutlarında test et.

CSS derslerimizle tasarımı pekiştir.