Responsive Tasarımın Temelleri: Viewport ve Media Queries

Mobil uyumlu web siteleri artık bir seçenek değil, zorunluluk. Farklı ekran boyutlarında doğru görüntü sunmak için responsive (duyarlı) tasarım teknikleri kullanılmalıdır. Bu yazıda, responsive tasarımın temel taşları olan viewport etiketi ve media query yapısına odaklanacağız.

1. Viewport Etiketi Nedir?

Viewport, bir web sayfasının cihaz ekranı üzerindeki görüntülenme alanıdır. Mobil tarayıcılar sayfaları küçültüp masaüstü gibi göstermeye çalışır. Bunun önüne geçmek için aşağıdaki meta etiketi kullanılır:

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

• width=device-width: Cihaz ekranının genişliğini kullan.
• initial-scale=1.0: Sayfa ilk yüklendiğinde 1x zoom ile göster.

2. Media Queries Nedir?

Media query’ler, CSS içinde cihaz özelliklerine göre farklı stiller uygulamamıza olanak tanır. Özellikle ekran genişliği (width) temel alınarak tasarım kontrolü sağlanır.

@media (max-width: 768px) {
  body {
    background-color: lightgray;
  }
}

• max-width: Belirli bir genişliğe kadar geçerli olacak stilleri belirler.
• Tablet, telefon ve masaüstü gibi cihazlar için farklı görünüm sağlar.

3. Sık Kullanılan Media Query Örnekleri

@media (max-width: 576px) { /* Telefon */ }
@media (min-width: 577px) and (max-width: 768px) { /* Tablet */ }
@media (min-width: 769px) { /* Masaüstü */ }

Sonuç:

Duyarlı tasarım için viewport etiketi ve media query yapısı temel araçlardır. Tüm cihazlarda uyumlu, erişilebilir ve kullanıcı dostu bir arayüz oluşturmak için bu iki yapı mutlaka kullanılmalıdır.