Responsive Web Tasarım: Mobil Uyumlu Siteler Yapmak

Günümüzde internet trafiğinin %60'ından fazlası mobil cihazlardan geliyor. Siteniz mobil uyumlu değilse, kullanıcılarınızın yarısını kaybediyorsunuz!

Media Queries ile Responsive Tasarım

/* Mobil öncelikli yaklaşım */
.container {
  width: 100%;
  padding: 15px;
}

/* Tablet */
@media (min-width: 768px) {
  .container {
    width: 750px;
    margin: 0 auto;
  }
}

/* Desktop */
@media (min-width: 1200px) {
  .container {
    width: 1140px;
  }
}

Flexbox ile Esnek Layout

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  flex: 1 1 300px; /* Minimum 300px, esnek büyüme */
}

Viewport Meta Tag

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