طراحی ریسپانسیو

طراحی ریسپانسیو (Responsive Design) رویکردی است که چیدمان و عناصر رابط را با اندازه صفحه و ویژگی‌های دستگاه سازگار می‌کند.

کجا استفاده می‌شود؟

جدول مقایسه فریم‌ورک‌ها باید در موبایل امکان اسکرول افقی داشته باشد و متن خوانا بماند.

اشتباه رایج

صرف کوچک شدن صفحه کافی نیست. قابلیت لمس، اندازه فونت و ترتیب محتوا نیز مهم‌اند.

نمونه CSS ریسپانسیو

@media (max-width: 768px) {
  .product-grid { grid-template-columns: 1fr; }
}

طراحی ریسپانسیو فقط کوچک کردن فونت نیست. فاصله لمس، عرض تصاویر، جدول‌های بزرگ و دسترس‌پذیری کیبورد نیز باید آزمون شوند.