آموزش جامع طراحی واکنش‌گرا در CSS

🎯 اهداف یادگیری

• درک مفهوم طراحی واکنش‌گرا و اهمیت آن
• آشنایی با Media Queries در CSS
• یادگیری واحدهای نسبی در CSS
• طراحی Layoutهای انعطاف‌پذیر
• تکنیک‌های تصاویر واکنش‌گرا

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

طراحی واکنش‌گرا (Responsive Design) روشی است که در آن ظاهر وبسایت به صورت خودکار با اندازه صفحه نمایش دستگاه کاربر (موبایل، تبلت، دسکتاپ) سازگار می‌شود.

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

اصول طراحی واکنش‌گرا:

• Fluid Grids: استفاده از واحدهای نسبی مانند درصد به جای پیکسل
• Flexible Images: تصاویری که با اندازه container تطبیق می‌یابند
• Media Queries: قوانین CSS شرطی بر اساس مشخصات دستگاه

📌 Media Queries

Media Queries امکان اعمال استایل‌های مختلف بر اساس ویژگی‌های دستگاه مانند عرض صفحه نمایش را فراهم می‌کند:

/* استایل پیش‌فرض برای موبایل (Mobile First) */
.header {
  font-size: 1rem;
}
/* تبلت - عرض 768px به بالا */
@media (min-width: 768px) {
  .header {
    font-size: 1.2rem;
  }
}
/* دسکتاپ - عرض 1024px به بالا */
@media (min-width: 1024px) {
  .header {
    font-size: 1.5rem;
  }
}

نقاط شکست رایج (Breakpoints):

• موبایل: 320px - 480px
• تبلت: 768px - 1024px
• دسکتاپ کوچک: 1024px - 1200px
• دسکتاپ بزرگ: 1200px به بالا

📌 واحدهای نسبی در CSS

استفاده از واحدهای نسبی به جای واحدهای مطلق (مانند px) برای ایجاد انعطاف‌پذیری:

.container {
  width: 90%; /* درصدی از والد */
  padding: 2em; /* مضربی از font-size عنصر */
  font-size: 1rem; /* برابر با font-size ریشه (html) */
  margin: 1vh 2vw; /* درصدی از ارتفاع و عرض viewport */
}

مقایسه واحدهای CSS:

📌 Flexbox برای Layoutهای واکنش‌گرا

Flexbox یک مدل Layout در CSS است که طراحی واکنش‌گرا را بسیار ساده می‌کند:

.container {
  display: flex;
  flex-wrap: wrap; /* اجازه می‌دهد آیتم‌ها به خط بعد بروند */
  gap: 1rem; /* فاصله بین آیتم‌ها */
}
.item {
  flex: 1 1 200px; /* flex-grow | flex-shrink | flex-basis */
}

مزایای Flexbox:

• کنترل آسان تراز و توزیع فضای بین آیتم‌ها
• توانایی تغییر جهت نمایش (راست به چپ، چپ به راست، عمودی، افقی)
• توزیع یکنواخت فضای باقیمانده بین آیتم‌ها
• پشتیبانی گسترده از مرورگرهای مدرن

📌 Grid Layout برای طراحی پیشرفته

CSS Grid یک سیستم دو بعدی برای ایجاد Layoutهای پیچیده است:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

ویژگی‌های کلیدی Grid:

• auto-fit و minmax: ایجاد ستون‌های واکنش‌گرا بدون نیاز به Media Query
• fr واحد: توزیع فضای باقیمانده به نسبت تعیین شده
• مناطق نام‌گذاری شده: تعریف مناطق Layout با نام‌های معنادار

📌 تصاویر واکنش‌گرا

تکنیک‌های مختلف برای نمایش بهینه تصاویر در دستگاه‌های مختلف:

<img src="image.jpg" alt="توضیح تصویر" style="max-width: 100%; height: auto;">
<picture>
  
  <source srcset="image-2x.jpg 2x">
  
  <source media="(max-width: 600px)" srcset="image-mobile.jpg">
  
  <img src="image.jpg" alt="توضیح تصویر">
picture>

تکنیک‌های بهینه‌سازی تصاویر:

• استفاده از فرمت‌های مدرن مانند WebP
• Lazy Loading برای تصاویر خارج از viewport
• تنظیم اندازه‌های مناسب برای دستگاه‌های مختلف
• استفاده از srcset برای نمایش تصاویر با وضوح مناسب

📌 تمرین عملی

یک Layout واکنش‌گرا با مشخصات زیر ایجاد کنید:

/* موبایل: یک ستونه */
/* تبلت: دو ستونه */
/* دسکتاپ: سه ستونه */
/* فوتر همیشه در پایین صفحه */

راهنمای تمرین:

1. از روش Mobile First استفاده کنید
2. برای Layout از Flexbox یا Grid استفاده کنید
3. نقاط شکست را بر اساس دستگاه‌های رایج تنظیم کنید
4. از واحدهای نسبی مانند rem و % استفاده کنید

📌 ابزارهای تست طراحی واکنش‌گرا

ابزارهای مفید برای تست و اشکال‌زدایی طراحی‌های واکنش‌گرا:

۱. ابزارهای توسعه‌دهنده مرورگر

F12 → Ctrl+Shift+M (در کروم و فایرفاکس)

• شبیه‌ساز دستگاه‌ها: تست سایت بر روی اندازه‌های مختلف نمایشگر
• تست سرعت: بررسی عملکرد سایت در دستگاه‌های مختلف
• نمایش Media Queries: مشاهده نقاط شکست و قوانین فعال

۲. ابزارهای آنلاین

• Responsinator: نمایش سایت در دستگاه‌های مختلف
• BrowserStack: تست واقعی روی دستگاه‌های فیزیکی
• Google Mobile-Friendly Test: بررسی بهینه بودن برای موبایل

📌 قدم بعدی

در درس بعدی با متغیرهای CSS آشنا خواهیم شد!