📌 Media Queries به ما اجازه می‌ده استایل‌های مختلفی رو برای اندازه‌های مختلف صفحه (responsive) یا شرایط دستگاه (device) تعریف کنیم.

🔹 ساختار Media Query

@media only screen and (شرط) {
  /* استایل‌هایی که فقط در این شرایط اعمال میشن */
}

🔹 مثال ساده

/* استایل عمومی */
body {
  background-color: lightblue;
}

/* وقتی عرض صفحه 600px یا کمتر باشه */
@media only screen and (max-width: 600px) {
  body {
    background-color: lightcoral;
  }
}

👉 توی دسکتاپ پس‌زمینه آبیه، اما اگه صفحه رو کوچیک کنیم (مثلاً تو موبایل) رنگش میشه قرمز.

🔹 شرط‌های رایج در Media Queries

1. max-width → وقتی عرض صفحه کوچکتر یا مساوی مقدار باشه

@media (max-width: 768px) { ... }

2. min-width → وقتی عرض صفحه بزرگتر یا مساوی مقدار باشه

@media (min-width: 1024px) { ... }

3. ترکیب min و max → برای محدوده‌ها

@media (min-width: 600px) and (max-width: 1200px) {
  body {
    font-size: 18px;
  }
}

4. orientation → بررسی حالت نمایش (افقی یا عمودی)

@media (orientation: landscape) {
  body {
    background: lightgreen;
  }
}

5. print → برای پرینت گرفتن

@media print {
  body {
    color: black;
    background: white;
  }
}

🔹 کاربرد در طراحی ریسپانسیو

معمولاً چند breakpoint استاندارد تعریف می‌کنن:

/* موبایل */
@media (max-width: 600px) { ... }

/* تبلت */
@media (min-width: 601px) and (max-width: 1024px) { ... }

/* لپ‌تاپ و دسکتاپ */
@media (min-width: 1025px) { ... }

✅ خلاصه:

• Media Queries برای ریسپانسیو کردن صفحات استفاده میشه.

• می‌تونی استایل رو برای دستگاه‌ها، عرض صفحه، حالت نمایش و حتی پرینت تغییر بدی.

• با ترکیب min-width و max-width میشه خیلی دقیق استایل داد.