طراحی واکنش‌گرا (RWD)

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

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

سه ستون RWD

ستون	توضیح
Flexible Layout	چیدمان منعطف (Grid/Flexbox)
Flexible Media	تصاویر و ویدیو واکنش‌گرا
Media Queries	تطبیق با اندازه صفحه

رویکرد Mobile-First ⭐

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

/* موبایل — پیش‌فرض */
    .container { width: 100%; padding: 15px; }
    
    /* تبلت */
    @media (min-width: 768px) {
        .container { padding: 30px; }
    }
    
    /* دسکتاپ */
    @media (min-width: 1024px) {
        .container { max-width: 1200px; margin: 0 auto; }
    }

اصول RWD

• از max-width به‌جای width ثابت
• از واحدهای نسبی (%، rem، vw)
• تصاویر واکنش‌گرا (max-width: 100%)
• Media Queries برای breakpoints
• Flexbox و Grid برای چیدمان
• تست روی دستگاه‌های مختلف

Breakpoints رایج

دستگاه	عرض
موبایل	۳۲۰-۴۸۰px
تبلت	۷۶۸px
لپ‌تاپ	۱۰۲۴px
دسکتاپ	۱۲۰۰px+

بهترین شیوه‌ها

• Mobile-First طراحی کنید
• breakpoints بر اساس محتوا، نه دستگاه
• از Grid و Flexbox استفاده کنید
• تصاویر را فشرده و واکنش‌گرا کنید
• روی دستگاه واقعی تست کنید

نکات مهم

• بیش از ۵۰٪ ترافیک وب از موبایل است
• گوگل سایت‌های واکنش‌گرا را بهتر رتبه می‌دهد
• viewport meta tag ضروری است
• Mobile-First کد تمیزتر و سریع‌تری می‌سازد