Media Query, CSS-də istifadə olunan və veb səhifənin fərqli cihazlarda və ekran ölçülərində uyğun görünməsini təmin edən mexanizmdir. Bu, responsiv dizaynın (adaptiv və ya cavab verən dizaynın) əsas hissəsidir. Saytınız mobil telefon, planşet, laptop və ya böyük ekranlarda oxşar funksionallıqla, amma uyğun dizaynla işləməlidir – bu, məhz media sorğuların köməyi ilə mümkün olur.

Nə üçün Media Query istifadə olunur?

• Ekran ölçüsünə görə dizayn dəyişdirmək üçün
• Cihazın növünə görə fərqli stil tətbiq etmək üçün
• Ekran yönünü (şaquli və ya üfüqi) nəzərə almaq üçün
• Retina və yüksək DPI cihazları üçün xüsusi qaydalar yazmaq üçün

Əsas Sintaksis:

@media (şərait) {

/* uyğun CSS qaydaları */

}

Ən çox istifadə olunan media query-lər:

/* Mobil cihazlar üçün */

@media (max-width: 600px) {

body {

background-color: lightblue;

}

}

/* Planşetlər üçün */

@media (min-width: 601px) and (max-width: 1024px) {

body {

background-color: lightgreen;

}

}

/* Böyük ekranlı cihazlar üçün */

@media (min-width: 1025px) {

body {

background-color: lightgray;

}

}

Ən çox istifadə olunan xüsusiyyətlər:

• max-width: maksimum en
• min-width: minimum en
• orientation: ekranın istiqaməti (portrait və ya landscape)
• resolution: ekranın keyfiyyəti
• aspect-ratio: en və hündürlük nisbəti

Müasir praktikada istifadə:

.container {

width: 100%;

}

@media (min-width: 768px) {

.container {

width: 750px;

}

}

@media (min-width: 1200px) {

.container {

width: 1140px;

}

}

Bu şəkildə dizayn müxtəlif ölçülü cihazlara uyğunlaşdırılır. Bu, həm istifadəçi təcrübəsini artırır, həm də saytı daha peşəkar göstərir.