طراحی وب واکنش‌گرا (Responsive Web Design یا RWD) روشی در طراحی سایت هست که باعث میشه وب‌سایت در همه دستگاه‌ها (موبایل، تبلت، لپ‌تاپ، مانیتورهای بزرگ) به‌خوبی نمایش داده بشه.

چرا طراحی واکنش‌گرا مهمه؟

• امروزه بیشتر کاربران با موبایل وارد وب‌سایت‌ها میشن 📱

• تجربه کاربری بهتر → ماندگاری بیشتر کاربر

• بهبود سئو (گوگل وب‌سایت‌های واکنش‌گرا رو ترجیح میده) 🔍

• یک سایت → همه دستگاه‌ها (نیازی به طراحی نسخه جدا نیست)

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

1. Fluid Grid Layouts → استفاده از واحدهای نسبی (مثل % و fr) به‌جای پیکسل ثابت.

2. Flexible Images → تصاویر باید متناسب با اندازه صفحه تغییر سایز بدن.

3. Media Queries → استفاده از CSS برای تغییر استایل‌ها در اندازه‌های مختلف صفحه.

مثال ساده (Media Query)

/* استایل پیش‌فرض */
body {
  background: lightblue;
}

/* برای صفحه‌های کوچکتر از 600px */
@media (max-width: 600px) {
  body {
    background: lightgreen;
  }
}

📌 در این مثال پس‌زمینه در دسکتاپ آبی و در موبایل سبز میشه.

نکته

• طراحی واکنش‌گرا یعنی سایت شما خودش رو با هر صفحه‌نمایشی تطبیق بده.

• RWD یکی از اصول پایه طراحی مدرن وب هست.