طراحی واکنش‌گرا

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

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

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

ویژگی viewport

ویژگی viewport مهم‌ترین بخش طراحی واکنش‌گرا است. این ویژگی به مرورگر می‌گوید که چگونه صفحه را مقیاس‌دهی کند:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

پارامترهای viewport

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

برای واکنش‌گرا بودن تصاویر:

<img src="image.jpg" style="max-width: 100%; height: auto;">

تصاویر با srcset

می‌توان تصاویر مختلف برای اندازه‌های مختلف ارائه داد:

<img src="image-small.jpg"
     srcset="image-small.jpg 480w,
             image-medium.jpg 768w,
             image-large.jpg 1024w"
     sizes="(max-width: 480px) 480px,
            (max-width: 768px) 768px,
            1024px"
     alt="تصویر واکنش‌گرا">

Media Queries

Media Queries برای استایل‌دهی متفاوت بر اساس اندازه صفحه استفاده می‌شود:

@media (max-width: 768px) {
  /* استایل‌ها برای موبایل */
}

@media (min-width: 769px) and (max-width: 1024px) {
  /* استایل‌ها برای تبلت */
}

@media (min-width: 1025px) {
  /* استایل‌ها برای دسکتاپ */
}

چیدمان واکنش‌گرا

برای چیدمان واکنش‌گرا از Flexbox یا Grid استفاده کنید:

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 1 300px; /* حداقل 300px */
}

واحدهای واکنش‌گرا

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

نکات مهم

این مبحث بخشی از دوره آموزش کامل HTML است.

ابزارهای مرتبط