مدیا کوئری‌ها یکی از ویژگی‌های بی نظیر CSS هستند که به ما اجازه می‌دهند تا سبک‌های مختلف را بر اساس خصوصیات دستگاه‌های کاربران به کار بگیریم. به زبان ساده، با استفاده از مدیا کوئری‌ها می‌توانیم تعیین کنیم که هر قسمت از وب‌سایت چگونه در دستگاه‌های مختلف نمایش داده شود. این ویژگی به ما کمک می‌کند تا وب‌سایتی کاملاً ریسپانسیو و متناسب با انواع دستگاه‌ها طراحی کنیم.
بگذارید این موضوع را با یک مثال ساده توضیح دهم. فرض کنید یک وب‌سایت دارید که باید روی هر دستگاهی از جمله موبایل، تبلت و دسکتاپ به خوبی کار کند. با استفاده از مدیا کوئری‌ها می‌توانیم تعیین کنیم که در چه اندازه‌هایی، عناصر به چه صورتی نمایش داده شوند. این به ما کنترل کاملی روی ظاهر وب‌سایت می‌دهد.
شاید فکر کنید که می‌توانید با استفاده از اندازه‌گیری‌های ثابت به این هدف برسید، اما باید بدانید که اندازه دستگاه‌ها و صفحه‌های نمایش بسیار متنوع است و روز به روز بیشتر می‌شود. مدیا کوئری‌ها دقیقاً به همین دلیل می‌توانند بسیار مفید باشند، زیرا آن‌ها به ما اجازه می‌دهند بر اساس ویژگی‌های مختلفی مانند عرض و ارتفاع ویوپورت، نوع دستگاه، و حتی ویژگی‌های خاص مانند حالت چشمگیر (prefers-reduced-motion) استایل بنویسیم.
امروزه ریسپانسیو بودن یک وب‌سایت از مهم‌ترین عوامل موفقیت در جذب و حفظ کاربران است، و به همین دلیل است که استفاده از مدیا کوئری‌ها و فهم کامل آن‌ها ضروری می‌باشد. با درک این تکنیک‌ها، می‌توانید اطمینان حاصل کنید که وب‌سایت شما همواره در بهترین حالت ممکن برای کاربران نمایش داده می‌شود.
در زیر یک نمونه کد ساده از مدیا کوئری آورده شده است که می‌تواند شما را در طراحی‌های خود یاری دهد.
نمونه کد مدیا کوئری
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
@media (min-width: 601px) and (max-width: 1200px) {
body {
background-color: lightcoral;
}
}
@media (min-width: 1201px) {
body {
background-color: lightgreen;
}
}
توضیحات هر خط کد
@media (max-width: 600px)
این خط نشان می‌دهد که سبک‌های خاص در هر صفحه‌ای اعمال شوند که عرض آن کمتر از یا برابر با 600 پیکسل باشد.
body { background-color: lightblue; }
زمانی که شرط بالا بر قرار باشد، رنگ پس‌زمینه به lightblue تغییر می‌کند.
@media (min-width: 601px) and (max-width: 1200px)
این خط می‌گوید که سبک‌های خاص برای عرض‌های بین 601 تا 1200 پیکسل اعمال شوند.
body { background-color: lightcoral; }
زمانی که شرط قبلی برقرار باشد، رنگ پس‌زمینه به lightcoral تغییر می‌کند.
@media (min-width: 1201px)
این خط نشان می‌دهد که سبک‌ها برای هر صفحه‌ای با عرض بیش از 1200 پیکسل اعمال شوند.
body { background-color: lightgreen; }
در این حالت، رنگ پس‌زمینه به lightgreen تغییر می‌کند.