حساب کاربری

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

طراحی واکنش‌گرا یا Responsive Web Design یکی از مهم‌ترین مهارت‌ها در دنیای امروز وب است. هدف این است که وب‌سایت شما بتواند خودش را با اندازه و ویژگی‌های دستگاه کاربر تطبیق دهد؛ چه لپ‌تاپ بزرگ باشد، چه تبلت یا گوشی موبایل کوچک.

🧱 مرحله اول: تعریف viewport در HTML

در بخش <head> فایل HTML این خط را اضافه کنید:

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

🔹 این دستور به مرورگر می‌گوید عرض واقعی دستگاه را به‌عنوان عرض صفحه در نظر بگیرد.
🔹 بدون این خط، در موبایل‌ها همه چیز خیلی کوچک و غیرقابل خواندن می‌شود.

🧱 مرحله دوم: استفاده از Media Queries

Media Query به شما اجازه می‌دهد برای اندازه‌های مختلف صفحه، قوانین CSS متفاوتی بنویسید.

مثال: تغییر چیدمان دو ستونه به یک ستونه

@media screen and (max-width: 700px) {
  .main-area,
  .sidebar {
    width: auto;
    float: none;
  }
}

🔹 وقتی عرض صفحه کمتر از 700px باشد، ستون‌ها روی هم قرار می‌گیرند.

🧱 مرحله سوم: تنظیم فاصله‌ها برای موبایل

@media screen and (max-width: 480px) {
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }
  .content-area {
    padding-top: 20px;
  }
  .hide-small {
    display: none;
  }
}

🔹 فاصله‌ها کمتر می‌شوند تا متن به‌خوبی در موبایل دیده شود.
🔹 کلاس .hide-small باعث می‌شود بخش‌هایی مثل بنر تبلیغاتی فقط در موبایل مخفی شوند.

🧱 مرحله چهارم: طراحی منوی ناوبری واکنش‌گرا

برای صفحه‌های متوسط (≤700px):

@media screen and (max-width: 700px) {
  .site-nav li {
    width: 33.32%;
    margin-right: 0;
  }
  .site-nav a {
    padding: 15px 0;
    margin-right: 5px;
    margin-bottom: 5px;
    text-align: center;
  }
}

🔹 سه لینک در هر ردیف، با فاصله مناسب برای لمس راحت‌تر.

برای موبایل‌های کوچک (≤480px):

@media screen and (max-width: 480px) {
  .site-nav li {
    width: 50%;
  }
}

🔹 فقط دو لینک در هر ردیف نمایش داده می‌شوند.

🧱 مرحله پنجم: استایل برای نمایشگرهای خیلی بزرگ

@media screen and (min-width: 1300px) {
  .container {
    max-width: 1200px;
  }
  body {
    font-size: 17px;
  }
}

🔹 در مانیتورهای بزرگ، فونت و فاصله‌ها بیشتر می‌شوند تا طراحی هماهنگ‌تر باشد.

🎯 جمع‌بندی

✔️ با افزودن تگ viewport و استفاده از Media Queries، سایت شما در هر دستگاهی خوانا و کاربردی می‌شود.
✔️ نیازی به جاوااسکریپت یا روش‌های پیچیده نیست؛ فقط CSS کافی است.
✔️ این تکنیک پایه‌ای برای طراحی مدرن است و در درس بعدی به سراغ گرید واکنش‌گرا (Responsive Grid) می‌رویم.

💡 پیشنهاد تمرین:
یک صفحه‌ی ساده با دو ستون بسازید و با Media Query آن را برای موبایل به یک ستون تبدیل کنید. سپس منوی ناوبری را واکنش‌گرا کنید تا در تبلت سه‌تایی و در موبایل دوتایی نمایش داده شود.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *