Media Query در CSS | طراحی واکنشگرا با مدیا کوئری
در این جلسه از آموزش CSS قصد داریم به مبحث مهم Media Query در CSS بپردازیم. این بحث در ریسپانسیو کردن صفحات وب بسیار کاربردی است. اگر هنوز اطلاع زیادی از طراحی رسپانسیو یا واکنشگرا ندارید در این چند جلسه همراه ما باشید.
طراحی واکنشگرا چیست؟
طراحی Responsive یا واکنشگرا به طراحی گفته می‌شود که در تمامی نمایشگرها به درستی قابل مشاهده باشد. ریسپانسیو بودن وب‌سایت یکی از استانداردهایی است که باید هر طراحی به آن توجه داشته باشد چرا که این موضوع در تجربه کاربری، سئو وب‌سایت و بسیاری از حوزه‌های دیگر تاثیر گذار است.
موضوعی که در این نوع طراحی باید مورد توجه قرار بگیرد، آسودگی کاربر در مشاهده همه‌ی محتوای حاضر در وب‌سایت است. اینکه با مشاهده وب‌سایت در هر نمایشگر، تمام بخش‌ها به درستی در کنار هم قرار بگیرند، خوانا باشند، دکمه‌ها قابل کلیک باشند و هیچ بخشی از سایت در نمایشگرهای کوچک یا بزرگ به هم ریختگی نداشته باشد.
این اصل می‌تواند با جابه‌جا کردن عناصر در نمایشگرهای مختلف، تغییر سایز و اندازه‌ها و… اتفاق بیفتد. مواردی که قصد داریم طی چند جلسه به آن بپردازیم.
سعی کردیم به ساده‌ترین زبان این مفهوم را بیان کنیم اما اگر هنوز کلمه‌ی ریسپانسیو برای شما ابهام دارد به مقاله زیر مراجعه کنید.
معرفی Media Query در CSS
دستور Media یکی از دستورات مهم برای ریسپانسیو کردن صفحات وب است. به کمک این دستور می‌توان استایل‌های مختلف را در نمایشگرهای گوناگون اعمال کرد. برای مثال شما می‌‌‌توانید یک سری از CSSها را برای نمایشگر موبایل بنویسید و یک سری استایل را فقط به نمایشگر کامپیوتر اختصاص دهید!
ساختار یک مدیا کوئری:
1 2 3 | @media mediatype and (expressions) { CSS Code; } |
نمونه‌ای از یک مدیا کوئری:
1 2 3 4 5 | @media screen and (max-width: 572px) { body { background: #000 ; } } |
در کد بالا اگر صفحه نمایشگر از ۵۷۲ پیکسل کمتر باشد (صفحه گوشی) رنگ پس‌زمینه مشکی خواهد شد. برای مثال برای زمان‌هایی که می‌خواهید وب‌سایت در موبایل دارک باشد اما در نمایشگرها نه!
چند مثال از مدیا کوئری
۱- Media Query با عرض نمایشگر
1 2 3 4 5 6 7 8 9 10 11 | @media screen and (min-width: 600px) { body { font-size: 20px; } } @media screen and (max-width: 600px) { body { font-size: 17px; } } |
در مثال بالا روش استفاده همزمان از چند مدیا‌کوئری را مشاهده می کنید. در این مثال در نمایشگر های کوچک‌تر از ۶۰۰ پیسکل، اندازه فونت ۱۷ پیکسل است اما در نمایشگرهای بزرگتر از این سایز، فونت به ۲۰ پیسکل تغییر خواهد کرد.
۲- Media Query برای جهت نمایشگر
1 2 3 4 5 | @media only screen and (orientation: landscape) { body { background-color: gray; } } |
این کوئری برای جهت نمایشگر (موبایل و تبلت) است و زمانی استفاده می‌شود که کاربر جهت گوشی یا تبلت خود را به حالت افقی (landscape) تغییر دهد.
۳- استفاده همزمان از دو شرط
1 2 3 4 5 6 7 | @media screen and (max-width: 900px) and (min-width: 500px) { .box { font-size: 50px; padding: 50px; } } |
در کد بالا نمونه‌ای از استفاده همزمان از دو شرط را مشاهده می‌کنید. کدهای درج شده در نمایشگرهایی با سایز ۵۰۰ تا ۹۰۰ پیکسل قابل روئیت هستند.
همراهان عزیز ادمین‌سایت، همراه ما باشید تا در جلسه بعدی مبحث ریسپانسیو را با دستورات دیگر کامل کنیم.
سلام. ببخشید مطمئن هستید همه کد ها درستن؟ من هر کاری کردم جواب نداد.
Select and اش رو برداشتم، فاصله هاش رو جابجا کردم و حتی رفتم کد های یه سایتو کپی پیست کردم!
کار نکرد.من به این کد خیلی نیاز دارم لطفا کمک کنید
سلام وقت بخیر
بله همه کد ها صحیح هستند اما بستگی داره شما چطور ازشون استفاده کرده باشید
پیش نیاز این مقاله آشنایی مقدماتی با html و css هست.
اگر به این مباحث آشنا هستید و باهاشون کار کردید نباید براتون مشکلی بوجود بیاد
موفق باشید
سلام میشه بدون کلاس بندی در html داخل همون html مدیا نوشت این امکان پذیره
سلام به شما
متوجه این بخش از سوالتون نشدم بدون کلاس بندی… ولی برای نوشتن مدیا میتونید داخل تگ html بنویسید فقط باید توجه کنید که این کد cssهستش پس باید داخل تگ style قرار بگیره
سلام خیلی ممنونم بابت دوره خوبتون استاد سلطانی
سلام خدمت شما دوست عزیز من مثال های بالا را در فایل css نوشتم و فایل html هم به صورت external باهاش ارتباط برقرار کردم ولی دستورات اجرا نمیشن @media هام تو فایل css که نگا میکنم قرمز یعنی یه جوری انگار پشتیبانی نمیکنه میشه بگید مشکل چیه ممنون
سلام باید چک کنید که آیا که ارتباط به درستی انجام شده یا نه. میتونید ارتباط رو با اعمال یک گراند به body تست کنید.
@media هم میتونید به صورت های دیگه تست کنید. مثلا بدون عبارت screen and
برای استفاده از مدیا کوری باید کدزیر بین head قرار بگیره
سلام خسته نباشید . اگر بخوام صفحه وبم برای همه ی نمایشگرها باشد باید چه کد media رو بنویسم ؟
بدون مدیا هم در همه نمایشگر ها نشون داده میشه اما شما میتونید حالت طراحی رو در نمایشگرهای مختلف تغییر بدید تا دسترسی بهتری ایجاد شه
بسته به طراحی چندین مدیا باید استفاده شه . تو هر قیمت متفاوت هستش