درس هشتم: طراحی واکنشگرا (Responsive) با Media Queries
درس هشتم: طراحی واکنشگرا (Responsive) با Media Queries
طراحی واکنشگرا یعنی سایت شما خودش را با اندازه صفحه نمایش کاربر وفق دهد. ابزار اصلی ما برای این کار در CSS، استفاده از Media Queries است. با این دستور به مرورگر میگوییم: «اگر عرض صفحه از این مقدار کمتر شد، این استایلها را اعمال کن».
📱 ۱. دستور @media چگونه کار میکند؟
ما معمولاً برای موبایلها یک “نقطه شکست” (Breakpoint) تعریف میکنیم. رایجترین نقطه شکست برای موبایلها عرض 768 پیکسل است.
/* استایل برای کامپیوتر */
.sidebar { width: 30%; }
/* استایل مخصوص موبایل (صفحات زیر 768 پیکسل) */
@media (max-width: 768px) {
.sidebar {
width: 100%; /* در موبایل تمام عرض شود */
display: block;
}
}🚀 ۲. استراتژی اولویت موبایل (Mobile-First)
طراحان حرفهای ابتدا سایت را برای موبایل طراحی میکنند و سپس با افزایش عرض صفحه، بخشهای پیچیدهتر را اضافه میکنند. این کار باعث سرعت بالاتر سایت در گوشیها میشود.
💡 نکات طلایی واکنشگرایی:
- 📏 درصد به جای پیکسل: تا حد امکان از مقادیر نسبی مثل
%یاvwبه جایpxاستفاده کنید. - 🖼️ تصاویر منعطف: همیشه به تصاویر خود ویژگی
max-width: 100%;بدهید تا از کادر خارج نشوند. - 🔍 تست کنید: در مرورگر کروم، کلید
F12را بزنید و آیکون موبایل را فعال کنید تا سایت را در ابعاد مختلف ببینید.
🚩 چالش واکنشگرایی:
کدی بنویسید که در حالت عادی رنگ پسزمینه صفحه آبی باشد، اما وقتی عرض صفحه به کمتر از 600 پیکسل رسید (حالت موبایل)، رنگ پسزمینه به سبز تغییر کند.