Web geliştirmede medya sorgularının, mobil cihazlar…

Medya sorguları, cihazın özelliklerine veya görüntüleme alanına bağlı olarak belirli CSS stillerinin uygulanmasına olanak tanır. Bu, farklı ekranlarda doğru şekilde görüntülenen uyumlu bir tasarım oluşturmak için kullanılır; bunlar arasında mobil cihazlar, tabletler ve masaüstleri bulunur.

Ana medya sorgusu sözdizimi:

@media <medya_türü> and (<ifade>) {
  /* CSS kuralları */
}

<medya_türü> sorgunun hangi cihaz türüne uygulandığını belirler (örneğin, screen, print, all).
<ifade> stilin hangi koşullarda uygulanacağını belirler (örneğin, genişlik, yükseklik, ekran yönelimi, çözünürlük).

Uyarlanabilir tasarım için popüler ifadeler:

min-width: Görüntüleme alanının genişliği belirtilen değerden büyük veya eşit ise stiller uygulanır.
max-width: Görüntüleme alanının genişliği belirtilen değerden küçük veya eşit ise stiller uygulanır.
orientation: Ekran yönüne bağlı olarak stiller uygulanır (portrait veya landscape).
resolution: Ekran çözünürlüğüne bağlı olarak stiller uygulanır.

Mobil cihazlarda max-width kullanımı örneği:

/* Varsayılan stiller */
body {
  font-size: 16px;
}

/* 768px genişliğe kadar ekranlar için stiller (tipik olarak mobil cihazlar) */
@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
  .container {
    padding: 10px;
  }
}

min-width kullanımıyla masaüstleri için örnek ("mobil öncelikli" yaklaşım):

/* Mobil varsayılan stiller */
.column {
  width: 100%;
}

/* 992px ve üzeri genişlikte ekranlar için stiller (tipik olarak masaüstleri) */
@media screen and (min-width: 992px) {
  .column {
    width: 50%;
    float: left;
  }
}

and, or (medya sorgularında or, virgülle yazılır) ve not operatörleri ile ifadelerin kombinasyonu:

@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* Sadece tabletler için stiller */
}

@media screen and (orientation: landscape), print {
  /* Yatay ekran ve yazdırma için stiller */
}

viewport meta etiketi, mobil cihazlarda medya sorgularının düzgün çalışması için önemlidir:

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

width=device-width görüntüleme alanının genişliğini cihazın genişliğine ayarlar.
initial-scale=1.0 başlangıç yakınlaştırma oranını belirler.

Bu meta etiketsiz, birçok mobil tarayıcı varsayılan olarak sayfayı ölçekler, gerçek cihaz genişliğini göz ardı eder, bu da uyum sağlama özelliğini bozar.

Web geliştirmede medya sorgularının, mobil cihazlar da dahil olmak üzere, uyumlu tasarım için nasıl çalıştığı?