HTML Responsive Web Design

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

📌 چرا ریسپانسیو مهمه؟

  • بیشتر کاربران با موبایل وارد سایت می‌شن.

  • گوگل به سایت‌های ریسپانسیو رتبه بهتری می‌ده (SEO).

  • تجربه کاربری خیلی بهتری داره.

📌 تکنیک‌های اصلی Responsive Design

1. Meta Viewport Tag

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

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

2. نسبت‌های انعطاف‌پذیر (Fluid Layouts)

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

  • درصد %

  • viewport (مثل vw، vh)

  • rem / em

مثال:

.container {
  width: 80%;   /* به جای 1200px */
}

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

تصاویر باید متناسب با صفحه تغییر اندازه بدن:

img {
  max-width: 100%;
  height: auto;
}

4. Media Queries

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

/* موبایل (تا 600px) */
@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

/* تبلت (600px تا 900px) */
@media (min-width: 601px) and (max-width: 900px) {
  body {
    background-color: lightgreen;
  }
}

/* دسکتاپ (بیشتر از 900px) */
@media (min-width: 901px) {
  body {
    background-color: lightcoral;
  }
}

5. Flexbox و Grid

ابزارهای فوق‌العاده برای ساخت Layout های واکنش‌گرا بدون نیاز به فریم‌ورک.

6. فریم‌ورک‌ها (Bootstrap / TailwindCSS)

این کتابخانه‌ها کلاس‌های آماده برای ریسپانسیو دارن و سرعت طراحی رو خیلی بالا می‌برن.

📌 نمونه کامل

<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Example</title>
  <style>
    .container {
      display: flex;
      flex-wrap: wrap;
    }
    .box {
      flex: 1 1 300px;
      margin: 10px;
      padding: 20px;
      background: coral;
      color: #fff;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">باکس 1</div>
    <div class="box">باکس 2</div>
    <div class="box">باکس 3</div>
  </div>
</body>
</html>

🔹 این کد باعث می‌شه باکس‌ها روی دسکتاپ کنار هم باشن و روی موبایل خودشون خودکار بیان زیر هم.