CSS Media Sorğuları ilə Responsive Dizayn

Salam dostlar! Bu gün veb inkişafının əsas sütunlarından biri olan responsive dizayn və onun əsas vasitəsi olan CSS Media Sorğuları haqqında danışacağıq. Müasir dövrdə vebsaytların müxtəlif ölçülü ekranlarda – kompüter, planşet və mobil telefonlarda – yaxşı görünməsi vacibdir. Məhz burada media sorğuları köməyimizə çatır.

Media Sorğuları Nədir?
CSS Media Sorğuları, veb səhifənizin müxtəlif cihazların xüsusiyyətlərinə (ekran ölçüsü, cihazın növü, oriyentasiya və s.) uyğun olaraq fərqli stil qaydaları tətbiq etməsinə imkan verən bir CSS3 moduludur. Bu, saytınızın hər bir istifadəçi üçün optimal görünüş və istifadəçi təcrübəsi təmin etməsini təmin edir.

Necə İşləyir?
Media sorğuları, müəyyən bir şərt ödəniləndə işə düşən şərti CSS blokları kimidir. Ən çox istifadə olunan şərt ekranın eni (width) və ya hündürlüyüdür (height).

Əsas Sintaksis:
Media sorğularının əsas sintaksisi belədir:

• media-type: all, screen, print kimi dəyərlər alır. Ən çox screen istifadə olunur.
  
• media-feature: max-width, min-width, orientation kimi xüsusiyyətlər.

Praktik Nümunələr:
Gəlin bəzi nümunələrə baxaq:

• Mobil cihazlar üçün (768px-dən kiçik ekranlar):
  
  CODE Copy

  123456789@media screen and (max-width: 768px) {
    body {
      background-color: lightblue;
    }
    .container {
      width: 100%;
      padding: 10px;
    }
  }

  
  Bu kod, ekran eni 768 pikseldən az olduqda body fonunu açıq mavi edir və .container sinfinin enini 100% təyin edir.
  
  
• Planşetlər üçün (768px və 1024px arası ekranlar):
  
  CODE Copy

  12345678@media screen and (min-width: 768px) and (max-width: 1024px) {
    body {
      background-color: lightgreen;
    }
    .sidebar {
      display: none; /* Yan paneli gizlədir */
    }
  }

  
  Bu nümunə isə planşet ölçüləri üçün fərqli fon rəngi və yan paneli gizlətmə kimi dəyişikliklər tətbiq edir.
  
  
• Yalnız çap üçün:
  
  CODE Copy

  123456789@media print {
    body {
      font-size: 12pt;
      color: black;
    }
    .no-print {
      display: none;
    }
  }

  
  Bu hissə səhifə çap olunarkən xüsusi stil qaydaları tətbiq edir, məsələn, müəyyən elementləri gizlədir.

Ən Yaxşı Təcrübələr:

• Mobile-first yanaşması: Əvvəlcə mobil cihazlar üçün dizayn edin, sonra daha böyük ekranlar üçün media sorğuları ilə dəyişikliklər edin. Bu, performansı yaxşılaşdırır.
  
• Məntiqli kəsmə nöqtələri (breakpoints): Cihazların standart ölçülərinə (məsələn, 320px, 768px, 1024px, 1200px) əsaslanmaq əvəzinə, məzmununuzun tələb etdiyi yerlərdə kəsmə nöqtələri təyin edin.
  
• Daxili CSS və ya Xarici Fayl: Media sorğularını
  CODE Copy

  1<style>

  etiketi içərisində və ya ayrı bir
  CODE Copy

  1.css

  faylında istifadə edə bilərsiniz. Xarici fayllar böyük layihələr üçün daha səliqəlidir.

Ümid edirəm ki, bu məlumatlar sizə CSS Media Sorğularını anlamağa və responsive vebsaytlar yaratmağa kömək edəcək. Hər hansı bir sualınız olsa, çəkinmədən soruşun!