شروع پرقدرت آموزش HTML و CSS [ ورود به دنیای هیجان انگیز وب! ]

30% تخفیف برای مدت محدود!

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


نویسنده:
دوشنبه ۲۸ مهر ۱۳۹۹
media query در CSS

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

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

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

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

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

طراحی واکنشگرا

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

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


معرفی Media Query در CSS

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

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

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

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


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

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

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

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

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

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

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

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

دیدگاهتان را بنویسید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *