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

Media Queries: تنظیمات جادویی برای اندازه‌های مختلف صفحه! ✨

سلام به همگی! توی جلسه قبل با مفهوم طراحی واکنش‌گرا (Responsive Design) و اهمیتش آشنا شدیم. حالا وقتشه که عمیق‌تر بشیم و ببینیم چطور می‌تونیم با استفاده از Media Queries، استایل‌های مختلفی رو برای اندازه‌های گوناگون صفحه نمایش تعریف کنیم. Media Queries مثل یه کلید جادویی هستن که به ما اجازه می‌دن CSS خودمون رو بر اساس شرایط مختلف، تغییر بدیم. بیاین ببینیم چطور می‌تونیم این جادو رو به کار بگیریم! 🧙‍♀️

1. ساختار اصلی Media Query: گوش دادن به صدای مرورگر! 👂

شکل کلی یه Media Query به این صورته:

@media media-type and (media-feature) {
  /* کدهای CSS که فقط در این شرایط اجرا می‌شن */
  selector {
    property: value;
  }
}

* @media: کلمه‌ی کلیدی که شروع یه Media Query رو نشون می‌ده.
* media-type: نوع رسانه رو مشخص می‌کنه (مثل screen برای صفحه نمایش، print برای پرینت، all برای همه). معمولاً از screen یا all استفاده می‌کنیم.
* media-feature: شرط اصلی ما اینجاست! ویژگی‌ای که می‌خوایم بر اساسش استایل‌ها رو تغییر بدیم. معروف‌ترینش width (عرض) هست.
* and: برای ترکیب چند شرط یا بین media-type و media-feature استفاده می‌شه.

2. نقاط شکست (Breakpoints): مرزهای جادویی! 🚧

نقاط شکست (Breakpoints)، همون عرض‌های خاصی هستن که ما تصمیم می‌گیریم چیدمان یا استایل‌های وب‌سایت‌مون رو تغییر بدیم. مثلاً، ممکنه بخوایم وقتی صفحه از عرض 768 پیکسل کوچکتر شد، تعداد ستون‌های گرید رو کم کنیم. این 768 پیکسل یه نقطه شکست محسوب می‌شه.

رایج‌ترین نقاط شکست (که البته می‌تونن بر اساس نیاز پروژه شما تغییر کنن):

• موبایل‌های کوچک: معمولاً تا 480px یا 576px
• تبلت‌ها (عمودی): حدود 768px
• تبلت‌ها (افقی) / لپ‌تاپ‌های کوچک: حدود 992px
• دسکتاپ‌های بزرگ: 1200px به بالا

3. استفاده از `max-width` و `min-width`: کی، کجا، چگونه؟ 🎯

برای تعریف نقاط شکست، دو تا از پرکاربردترین ویژگی‌ها در Media Queries، max-width و min-width هستن:

• max-width: برای تعریف استایل‌هایی که از یه عرض مشخص تا پایین اعمال می‌شن. این برای رویکرد Mobile-First عالیه. یعنی می‌گیم: “تا وقتی عرض صفحه اینقدره، این استایل‌ها رو اعمال کن”.
• min-width: برای تعریف استایل‌هایی که از یه عرض مشخص به بالا اعمال می‌شن. این برای رویکرد Desktop-First کاربرد داره. یعنی می‌گیم: “از وقتی عرض صفحه اینقدر شد، این استایل‌ها رو اعمال کن”.

/* استایل‌های پیش‌فرض (Mobile-First) */
.container {
  width: 90%;
  margin: 0 auto;
  background-color: #e0f7fa;
  padding: 15px;
}

h1 {
  font-size: 1.5em; /* فونت بزرگتر برای موبایل */
}

/* وقتی صفحه به اندازه تبلت (768px) یا بزرگتر شد */
@media (min-width: 768px) {
  .container {
    width: 75%; /* عرض کانتینر کمی بیشتر می‌شه */
    background-color: #b2ebf2;
  }
  h1 {
    font-size: 2.2em; /* فونت بزرگتر برای تبلت */
  }
  /* اینجا می‌تونیم گرید رو هم تغییر بدیم، مثلاً ستون‌ها رو کنار هم بیاریم */
  .page-container {
    grid-template-columns: 200px 1fr; /* مثال: ستون منو و محتوا */
    grid-template-areas:
      "header header"
      "nav main"
      "footer footer";
  }
}

/* وقتی صفحه به اندازه دسکتاپ بزرگ (1200px) یا بزرگتر شد */
@media (min-width: 1200px) {
  .container {
    width: 65%; /* عرض کانتینر بیشتر می‌شه */
    background-color: #80deea;
  }
  h1 {
    font-size: 3em; /* فونت بزرگتر برای دسکتاپ */
  }
  /* شاید بخوایم سایدبار رو هم اضافه کنیم */
   .page-container {
    grid-template-columns: 200px 1fr 250px; /* مثال: منو، محتوا، سایدبار */
    grid-template-areas:
      "header header header"
      "nav main sidebar"
      "footer footer footer";
  }
}

در مثال بالا، ما از رویکرد Mobile-First استفاده کردیم. استایل‌های اولیه برای موبایل هستن و با بزرگتر شدن صفحه، استایل‌های جدید از طریق min-width اضافه شدن.

4. مثال عملی: تنظیم چیدمان Grid با Media Queries! 📐

بیاید همون مثال پروژه Layout رو با Media Queries کامل‌تر کنیم:

/* فرض کنید HTML و استایل‌های اولیه page-container و بخش‌ها رو داریم */

/* -- استایل‌های پیش‌فرض (Mobile-First: سه ستون زیر هم) -- */
.page-container {
  display: grid;
  grid-template-areas:
    "header"
    "nav"
    "main"
    "sidebar"
    "footer";
  grid-template-columns: 1fr; /* فقط یک ستون */
  grid-template-rows: auto auto 1fr auto auto; /* ارتفاع بخش‌ها */
  min-height: 100vh;
  gap: 10px;
  padding: 10px;
}

/* -- برای تبلت‌ها و اندازه‌های متوسط (مثلاً 768px به بالا) -- */
@media (min-width: 768px) {
  .page-container {
    grid-template-columns: 200px 1fr; /* دو ستون: منو (200px) و بقیه (1fr) */
    grid-template-areas:
      "header header"
      "nav    main"
      "footer footer";
    grid-template-rows: auto 1fr auto; /* هدر، محتوا (بقیه فضا)، فوتر */
  }
  /* سایدبار در این حالت یا نیست یا باید جای دیگه‌ای تعریف بشه */
  .page-sidebar {
    display: none; /* در این اندازه سایدبار رو مخفی می‌کنیم */
  }
}

/* -- برای دسکتاپ‌های بزرگ (مثلاً 1200px به بالا) -- */
@media (min-width: 1200px) {
  .page-container {
    grid-template-columns: 200px 1fr 250px; /* سه ستون: منو، محتوا، سایدبار */
    grid-template-areas:
      "header header header"
      "nav    main   sidebar"
      "footer footer footer";
    grid-template-rows: auto 1fr auto; /* هدر، محتوا (بقیه فضا)، فوتر */
  }
  .page-sidebar {
    display: block; /* سایدبار رو دوباره نمایش می‌دیم */
  }
}

/* استایل‌های بخش‌ها ... */
.page-header { grid-area: header; background-color: #ffccbc; padding: 20px; border-radius: 8px; }
.page-nav { grid-area: nav; background-color: #ffab91; padding: 20px; border-radius: 8px; }
.page-main { grid-area: main; background-color: #fff9c4; padding: 20px; border-radius: 8px; }
.page-sidebar { grid-area: sidebar; background-color: #ffe0b2; padding: 20px; border-radius: 8px; }
.page-footer { grid-area: footer; background-color: #bf3608; color: white; padding: 20px; text-align: center; border-radius: 8px; }

همونطور که می‌بینید، با تغییر نقاط شکست، ما کل ساختار Grid رو دوباره تعریف کردیم تا بهترین تجربه رو روی هر دستگاهی داشته باشیم.

Media Queries ابزار فوق‌العاده قدرتمندی برای ساخت وب‌سایت‌های واکنش‌گرا هستن. با یادگیری درست استفاده از اون‌ها، می‌تونید مطمئن بشید که طرح شما روی هر دستگاهی، از موبایل گرفته تا بزرگترین مانیتورها، به بهترین شکل نمایش داده می‌شه. پس حتماً حسابی تمرین کنید و با اندازه‌های مختلف بازی کنید! عالی باشید! 🌟