در دنیای امروز، طراحی سایت هایی که به خوبی روی دستگاه‌های مختلف اجرا شوند، بسیار مهم است. یکی از ابزارهای قدرتمند در دست طراحان وب برای این منظور، کوئری‌های رسانه‌ای در CSS است. کوئری‌های رسانه‌ای به ما این امکان را می‌دهند که استایل‌های خاصی را برای دستگاه‌های خاص و یا شرایط خاصی اعمال کنیم. مثلاً می‌توانیم مشخص کنیم که برای دستگاه‌های با عرض کمتر از ۶۰۰ پیکسل، فونت‌ها بزرگتر شوند. این ویژگی باعث می‌شود که کاربران بدون نیاز به جابجا کردن صفحه، راحت‌تر محتوا را بخوانند.
شاید بپرسید کوئری مدیا دقیقاً چگونه کار می‌کند؟ اساس کار بسیار ساده است. شما ابتدا یک شرط برای محیطی که می‌خواهید تغییرات CSS در آن اعمال شود، تعیین می‌کنید. سپس کدهای CSS مورد نظر در داخل بلوکی مشخص نوشته می‌شود. به عنوان مثال، اگر بخواهید برای صفحه‌هایی که عرض آن‌ها زیر ۶۰۰ پیکسل است، نوشته‌های قرمز باشند، می‌توانید چنین کدی بنویسید.
این تغییرات بسیار کاربردی هستند و می‌توانند تجربه‌ی کاربری را به شدت بهبود بخشند. زیرا به جای این‌که سایت به یک صورت و اندازه نمایش داده شود، با توجه به دستگاه و موقعیت کاربر بروز می‌شود. همچنین ما می‌توانیم از کوئری‌های رسانه‌ای برای پنهان‌سازی یا نمایش برخی عناصر بر اساس اندازه صفحه استفاده کنیم. به طور مثال ممکن است بخواهید منوی اصلی سایت روی موبایل پنهان شود و یک دکمه همبرگری نمایش داده شود.
نکته جالب‌تر این که شما می‌توانید کوئری‌های رسانه‌ای را بر اساس سایر ویژگی‌ها مانند جهت دستگاه، میزان روشنایی، و حتی رزولوشن صفحه هم تنظیم کنید. به طور مثال، برای دستگاه‌هایی که در حالت پرتره (عمودی) هستند، می‌توانید طراحی خاصی را اعمال کنید. این موضوع کمک می‌کند بدون در نظر گرفتن اندازه صفحه، همیشه طراحی مرتب و خوانا داشته باشیم.
در ادامه، مثال هایی از کاربردهای متنوع کوئری‌های رسانه‌ای آورده شده است که می‌توانید به عنوان الگو از آن‌ها استفاده کنید و طراحی سایت‌تان را بهبود ببخشید. استفاده درست از این کوئری‌ها می‌تواند تفاوت‌های چشمگیری در نحوه نمایش سایت شما بر روی دستگاه‌های مختلف ایجاد کند.
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
@media only screen and (orientation: portrait) {
header {
display: none;
}
}
توضیحات خط به خط کد
@media only screen and (max-width: 600px)این خط مشخص می‌کند که کوئری برای دستگاه‌هایی با حداکثر عرض ۶۰۰ پیکسل اعمال شود.
bodyاستایل‌های مربوط به المنت
body داخل بلوک تعریف می‌شود.background-color: lightblue;رنگ پس‌زمینه از پیش‌فرض به آبی روشن تغییر می‌کند.
@media only screen and (orientation: portrait)این خط کوئری رسانه برای دستگاه‌هایی در حالت عمودی یا پرتره تنظیم می‌کند.
headerاستایل‌های مربوط به تگ
header در این بخش تعریف می‌شود.display: none;محیطی که باعث می‌شود تگ header در این حالت نمایش داده نشود.