Veb inkişafında media sorğularının necə işlədiyi, o…

Media sorğuları cihazın və ya baxış sahəsinin xüsusiyyətlərinə əsasən müəyyən CSS tərzlərinin tətbiqinə imkan verir. Onlar müxtəlif ekranlarda, o cümlədən mobil cihazlar, planşetlər və masaüstü kompüterlərdə düzgün göstərilən uyğunlaşan dizayn yaratmaq üçün istifadə olunur.

Əsas media sorğusunun sintaksisi:

@media <media_növü> and (<ifadə>) {
  /* CSS qaydaları */
}

<media_növü> sorğunun hansı cihaz növünə tətbiq olunduğunu müəyyən edir (məsələn, screen, print, all).
<ifadə> tərzlərin hansı şərtlər altında tətbiq olunacağını müəyyən edir (məsələn, en, hündürlük, ekranın istiqaməti, həll).

Populyar ifadələr üçün uyğunlaşma dizaynı:

min-width: Əgər baxış sahəsinin eni göstərilən dəyərdən böyük və ya bərabərdirsə, tərzlər tətbiq olunur.
max-width: Əgər baxış sahəsinin eni göstərilən dəyərdən kiçik və ya bərabərdirsə, tərzlər tətbiq olunur.
orientation: Ekranın istiqamətinə görə tərzlər tətbiq olunur (portrait və ya landscape).
resolution: Ekranın həllinə görə tərzlər tətbiq olunur.

Mobil cihazlar üçün max-width istifadə nümunəsi:

/* Əsas tərzlər */
body {
  font-size: 16px;
}

/* 768px-ə qədər genişlikdə ekranlar üçün tərzlər (adətən mobil üçün) */
@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
  .container {
    padding: 10px;
  }
}

min-width istifadə nümunəsi masaüstləri üçün ("mobil ilk" yanaşma):

/* Mobil üçün əsas tərzlər */
.column {
  width: 100%;
}

/* 992px və yuxarı genişlikdə ekranlar üçün tərzlər (adətən masaüstü) */
@media screen and (min-width: 992px) {
  .column {
    width: 50%;
    float: left;
  }
}

İfadələrin and, or (media sorğularında or vergüllə yazılır) və not operatorları ilə birləşdirilməsi:

@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* Yalnız planşetlər üçün tərzlər */
}

@media screen and (orientation: landscape), print {
  /* Yatay istiqamət və çap üçün tərzlər */
}

viewport meta-teqi mobil cihazlarda media sorğularının düzgün işləməsi üçün vacibdir:

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

width=device-width baxış sahəsinin genişliyini cihazın genişliyinə bərabər edir.
initial-scale=1.0 ilkin miqyaslama səviyyəsini təyin edir.

Bu meta-teq olmadan, çoxsaylı mobil brauzerlər səhifəni standart olaraq miqyaslandırır, real cihaz genişliyini nəzərə almır və bu, uyğunlaşmanı pozur.

Veb inkişafında media sorğularının necə işlədiyi, o cümlədən mobil cihazlar üçün cavab verən dizayn üçün?