Media Query یکی از ابزارهای اصلی CSS برای واکنش‌گرا کردن سایت هست.
با استفاده از اون می‌تونیم استایل‌های متفاوتی رو بر اساس اندازه صفحه‌نمایش یا نوع دستگاه اعمال کنیم.

ساختار کلی Media Query

@media (شرط) {
  /* استایل‌ها */
}

مثال ساده

body {
  background: lightblue;
}

@media (max-width: 600px) {
  body {
    background: lightgreen;
  }
}

📌 در اینجا:

• اگه عرض صفحه بیشتر از 600px باشه → پس‌زمینه آبیه.

• اگه عرض صفحه کمتر یا مساوی 600px باشه → پس‌زمینه سبزه.

انواع شرط‌ها در Media Query

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

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

3. orientation: portrait / landscape → جهت صفحه (عمودی یا افقی).

مثال چند شرطی

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

📌 این استایل فقط وقتی اجرا میشه که عرض صفحه بین 601px تا 1024px باشه.

نکته‌ها ✅

• بهترین روش برای Responsive Design استفاده از min-width هست (Mobile First Design).

• Media Query ها به ما اجازه میدن یک طراحی برای موبایل، یک طراحی برای تبلت و یک طراحی برای دسکتاپ داشته باشیم.