فصل هفدهم: Responsive Design — واکنش‌گرا کردن صفحات با CSS

اموزش رایگان CSS

مقدمه

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

۱. واحدهای واکنش‌پذیر (نسبی)

به‌جای px، از واحدهای نسبی مثل درصد (%)، vw/vh و rem/em استفاده کن تا اندازه‌ها نسبت به صفحه یا فونت تغییر کند.

.container {
  width: 80%;   /* نسبت به پدر */
  max-width: 900px; /* حتی روی مانیتور بزرگ بیشتر نشود */
}

h1 {
  font-size: 2.5rem; /* بر اساس اندازه root */
}

۲. مدیا کوئری (Media Queries) — قلب Responsive Design

مدیا کوئری اجازه می‌دهد فقط در شرایط خاص (مثلاً وقتی گوشی است یا عرض کمتر از 600px شد) استایل جدا بذاری:

@media (max-width: 600px) {
  body {
    font-size: 1rem;
    background: #f6f6f6;
  }
  .container {
    flex-direction: column;
    padding: 10px;
  }
}

یعنی فقط وقتی عرض صفحه کوچکتر از ۶۰۰ پیکسل است، این استایل فعال می‌شود.

۳. مخفی کردن یا تغییر چینش المان‌ها در موبایل

گاهی باید منو را جمع کنی یا المان غیرضروری حذف شود:

@media (max-width: 600px) {
  .sidebar {
    display: none;
  }
}

۴. گرید و فلکس ریسپانسیو

با کمک Flexbox و Grid، راحت بخش‌ها را جمع یا بچین:

.flex-container {
  display: flex;
  flex-direction: row;
}
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}

یعنی مثلاً کارت‌های افقی تو موبایل زیر هم می‌روند.

۵. عکس‌های واکنش‌گرا

عکس‌ها اگر با css زیر باشند، بزرگ‌تر از بخش‌شان چیزی نمی‌گیرند و مناسب هر دیوایس می‌شوند:

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

۶. مثال عملی (ساده)

<div class="container">
  <div class="item">آیتم ۱</div>
  <div class="item">آیتم ۲</div>
  <div class="item">آیتم ۳</div>
</div>
.container {
  display: flex;
  gap: 10px;
}
.item {
  background: #1976d2;
  color: #fff;
  padding: 20px;
  flex: 1;
  border-radius: 4px;
}
@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

در موبایل، آیتم‌ها یک‌به‌یک زیر هم می‌آیند.

۷. تمرین‌های کاربردی

۱. سایت ساده‌ای بساز که در دسکتاپ کنار هم و در موبایل زیر هم آیتم بچیند.
۲. هدر سایت را طوری تنظیم کن که فونت و padding آن در موبایل کوچک‌تر باشد.
۳. سایدبار سایت را در لپ‌تاپ نشان بده و در موبایل مخفی کن.

منابع سریع

محمد وب‌سایت
مطالب مشابه

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

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