CSS — Responsive Design

Genel Bakış

Responsive tasarım farklı ekran boyutlarına uyum sağlar.

Öğreneceklerin

• akışkan genişlik
• media queries
• responsive görseller
• mobile-first

Sözdizimi

@media (max-width: 768px){ ... }

Örnek

.container{ max-width:1200px; margin:0 auto; padding:16px; }
.grid{ display:grid; gap:12px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 768px){
  .grid{ grid-template-columns: 1fr; }
}

Notlar

• Mümkünse mobile-first.
• Esnek birimler kullan (%, rem).

  Kendin Dene: Playground aç: /tr/playground/html