مدیا کوئری یا Media Query یکی از ابزارهای بسیار قدرتمند در CSS برای طراحی و توسعه وب‌سایت‌های واکنش‌گرا است. با استفاده از این قابلیت، می‌توانید CSS مخصوص برای اندازه‌ها و دستگاه‌های مختلف بنویسید. به طور خلاصه، مدیا کوئری به شما این امکان را می‌دهد که استایل‌های مختلفی را برای صفحه‌نمایش با ابعاد و ویژگی‌های متفاوت اعمال کنید.
برای مثال، تصور کنید که یک وب‌سایت دارید و می‌خواهید در دستگاه‌های موبایل فونت متن کوچکتر و رنگ پس‌زمینه متفاوتی داشته باشد. با استفاده از مدیا کوئری‌ها، می‌توانید به راحتی این نوع تغییرات را اعمال کنید. در واقع، مدیا کوئری‌ها به شما اجازه می‌دهند تا اطمینان حاصل کنید که طراحی وب‌سایت شما در تمام دستگاه‌ها و اندازه‌های صفحه‌نمایش به خوبی کار می‌کند.
یکی از ساده‌ترین راه‌های استفاده از مدیا کوئری‌ها، استفاده از @media rules در CSS است. این دستورات به شما امکان می‌دهد که شرط‌هایی بر اساس ویژگی‌های خاصی مانند عرض صفحه‌نمایش، ارتفاع، و غیره قرار دهید و استایل‌های مرتبط را اعمال کنید. به عنوان مثال:
شما می‌توانید برای تغییر رنگ پس زمینه و اندازه فونت دقیقا برای اندازه‌های خاصی از دستگاه‌ها از این ابزار استفاده کنید. در اینجا قصد داریم نمونه‌ای از این کار را به شما نشان دهیم.
@media screen and (max-width: 768px) {
body {
background-color: #f0f8ff;
font-size: 14px;
}
}
در اینجا، در ابتدا از @media استفاده شده است که آغازگر مدیا کوئری است.
سپس از کلمه‌کلیدی screen برای تعیین نوع دستگاه استفاده می‌شود.
شرط (max-width: 768px) باعث می‌شود که این استایل‌ها تنها زمانی اعمال شوند که عرض صفحه‌نمایش 768 پیکسل یا کمتر باشد.
بلاک CSS درون آکولاد، استایل‌هایی را تعریف می‌کند که باید در این شرایط اعمال شوند: background-color: #f0f8ff; برای تغییر رنگ پس‌زمینه و font-size: 14px; برای کاهش اندازه فونت.
با استفاده از این مثال، به سادگی می‌توانید درک کنید که چطور می‌توان مدیا کوئری‌هایی برای طراحی‌های واکنش‌گرا و بهینه‌سازی تجربه کاربری ایجاد کرد.