Media Query در CSS | طراحی واکنشگرا با مدیا کوئری

در این جلسه از آموزش CSS قصد داریم به مبحث مهم Media Query در CSS بپردازیم. این بحث در ریسپانسیو کردن صفحات وب‌ بسیار کاربردی است. اگر هنوز اطلاع زیادی از طراحی رسپانسیو یا واکنشگرا ندارید در این چند جلسه همراه ما باشید.

طراحی واکنشگرا چیست؟

طراحی Responsive یا واکنشگرا به طراحی گفته می‌شود که در تمامی نمایشگرها به درستی قابل مشاهده باشد. ریسپانسیو بودن وب‌سایت یکی از استانداردهایی است که باید هر طراحی به آن توجه داشته باشد چرا که این موضوع در تجربه کاربری، سئو وب‌سایت و بسیاری از حوزه‌های دیگر تاثیر گذار است.

موضوعی که در این نوع طراحی باید مورد توجه قرار بگیرد، آسودگی کاربر در مشاهده همه‌ی محتوای حاضر در وب‌سایت است. اینکه با مشاهده وب‌سایت در هر نمایشگر، تمام بخش‌ها به درستی در کنار هم قرار بگیرند، خوانا باشند، دکمه‌ها قابل کلیک باشند و هیچ بخشی از سایت در نمایشگرهای کوچک یا بزرگ به هم ریختگی نداشته باشد.

این اصل می‌تواند با جابه‌جا کردن عناصر در نمایشگرهای‌ مختلف، تغییر سایز و اندازه‌ها و… اتفاق بیفتد. مواردی که قصد داریم طی چند جلسه به آن بپردازیم.

سعی کردیم به ساده‌ترین زبان این مفهوم را بیان کنیم اما اگر هنوز کلمه‌ی ریسپانسیو برای شما ابهام دارد به مقاله زیر مراجعه کنید.

طراحی ریسپانسیو چیست؟

معرفی Media Query در CSS

دستور Media یکی از دستورات مهم برای ریسپانسیو کردن صفحات وب‌ است. به کمک این دستور می‌توان استایل‌های مختلف را در نمایشگرهای گوناگون اعمال کرد. برای مثال شما می‌‌‌توانید یک سری از CSSها را برای نمایشگر موبایل بنویسید و یک سری استایل را فقط به نمایشگر کامپیوتر اختصاص دهید!

ساختار یک مدیا کوئری:

@media mediatype and (expressions) {
  CSS Code;
}

نمونه‌ای از یک مدیا کوئری:

@media screen and (max-width: 572px) {
  body {
    background: #000 ;
  }
}

در کد بالا اگر صفحه نمایشگر از ۵۷۲ پیکسل کمتر باشد (صفحه گوشی) رنگ پس‌زمینه مشکی خواهد شد. برای مثال برای زمان‌هایی که می‌خواهید وب‌سایت در موبایل دارک باشد اما در نمایشگرها نه!

چند مثال از مدیا کوئری

۱- Media Query با عرض نمایشگر

@media screen and (min-width: 600px) {
  body {
    font-size: 20px;
  }
}

@media screen and (max-width: 600px) {
  body {
    font-size: 17px;
  }
}

در مثال بالا روش استفاده همزمان از چند مدیا‌کوئری را مشاهده می کنید. در این مثال در نمایشگر های کوچک‌تر از ۶۰۰ پیسکل، اندازه فونت ۱۷ پیکسل است اما در نمایشگرهای بزرگتر از این سایز، فونت به ۲۰ پیسکل تغییر خواهد کرد.

۲- Media Query برای جهت نمایشگر

@media only screen and (orientation: landscape) {
  body {
    background-color: gray;
  }
}

این کوئری برای جهت نمایشگر (موبایل و تبلت) است و زمانی استفاده می‌شود که کاربر جهت گوشی یا تبلت خود را به حالت افقی (landscape) تغییر دهد.

۳- استفاده همزمان از دو شرط

@media screen and (max-width: 900px) and (min-width: 500px) {
 .box {
    font-size: 50px;
    padding: 50px;
  }
}

در کد بالا نمونه‌ای از استفاده همزمان از دو شرط را مشاهده می‌کنید. کدهای درج شده در نمایشگرهایی با سایز ۵۰۰ تا ۹۰۰ پیکسل قابل روئیت هستند.

همراهان عزیز ادمین‌سایت، همراه ما باشید تا در جلسه بعدی مبحث ریسپانسیو را با دستورات دیگر کامل کنیم.