Media Query یکی از مهم‌ترین ویژگی‌های CSS است که برای طراحی ریسپانسیو (واکنش‌گرا) استفاده می‌شود. با کمک Media Query، می‌توان استایل‌های متفاوتی را برای اندازه‌های مختلف صفحه‌نمایش، دستگاه‌های خاص، وضوح تصویر و حتی نوع چاپ اعمال کرد.

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

۱. Media Query چیست؟

Media Query به ما امکان می‌دهد تا استایل‌های خاصی را بر اساس ویژگی‌های صفحه نمایش یا دستگاه تعریف کنیم. به این ترتیب، عناصر وب به‌طور پویا و انعطاف‌پذیر در اندازه‌های مختلف تنظیم می‌شوند.

ساختار کلی Media Query در CSS

@media (شرایط موردنظر) {
    /* استایل‌های اعمال‌شده */
}

✅ مثال: تغییر رنگ پس‌زمینه صفحه برای صفحه‌نمایش‌های کوچکتر از ۷۶۸ پیکسل

@media (max-width: 768px) {
    body {
        background-color: lightgray;
    }
}

📌 نتیجه: وقتی عرض صفحه کمتر از ۷۶۸px شود، پس‌زمینه صفحه خاکستری خواهد شد.

۲. انواع Media Query بر اساس اندازه صفحه

الف) Media Query برای موبایل، تبلت و دسکتاپ

برای ایجاد یک سایت واکنش‌گرا، می‌توان استایل‌های مختلفی را برای اندازه‌های مختلف صفحه نمایش اعمال کرد.

/* استایل برای موبایل (عرض کمتر از ۶۰۰px) */
@media (max-width: 600px) {
    body {
        font-size: 14px;
    }
}

/* استایل برای تبلت (بین ۶۰۰px تا ۱۰۲۴px) */
@media (min-width: 600px) and (max-width: 1024px) {
    body {
        font-size: 16px;
    }
}

/* استایل برای دسکتاپ (بیشتر از ۱۰۲۴px) */
@media (min-width: 1024px) {
    body {
        font-size: 18px;
    }
}

✅ نتیجه:

• در موبایل فونت کوچک‌تر خواهد شد.
• در تبلت اندازه متوسط خواهد بود.
• در دسکتاپ فونت بزرگ‌تر نمایش داده می‌شود.

۳. استفاده از Media Query برای جهت نمایش (Portrait & Landscape)

می‌توان بر اساس جهت صفحه (عمودی یا افقی) استایل‌های مختلفی اعمال کرد.

/* حالت عمودی (Portrait) */
@media (orientation: portrait) {
    body {
        background-color: lightblue;
    }
}

/* حالت افقی (Landscape) */
@media (orientation: landscape) {
    body {
        background-color: lightcoral;
    }
}

✅ نتیجه:

• وقتی صفحه در حالت عمودی باشد، پس‌زمینه آبی می‌شود.
• وقتی در حالت افقی باشد، پس‌زمینه قرمز می‌شود.

۴. استفاده از Media Query برای دستگاه‌های خاص

می‌توان Media Query را برای دستگاه‌های خاص مانند چاپگرها، تلویزیون‌ها و صفحات لمسی اعمال کرد.

الف) Media Query برای حالت چاپ (Print)

@media print {
    body {
        font-size: 12pt;
        color: black;
    }
}

✅ نتیجه: هنگام چاپ صفحه، متن بزرگ‌تر و سیاه و سفید خواهد شد.

ب) Media Query برای دستگاه‌های لمسی

@media (hover: none) and (pointer: coarse) {
    button {
        font-size: 20px;
        padding: 15px;
    }
}

✅ نتیجه: برای دستگاه‌های لمسی، دکمه‌ها بزرگ‌تر خواهند شد تا استفاده راحت‌تر شود.

۵. ترکیب چندین شرط در Media Query

می‌توان چندین شرط را همزمان در یک Media Query ترکیب کرد.

@media (min-width: 600px) and (max-width: 1024px) and (orientation: portrait) {
    body {
        background-color: lightgreen;
    }
}

✅ نتیجه: اگر صفحه بین ۶۰۰px تا ۱۰۲۴px باشد و در حالت عمودی باشد، پس‌زمینه سبز می‌شود.

۶. بهترین روش برای استفاده از Media Query

✅ از اصول Mobile-First استفاده کنید: ابتدا برای موبایل طراحی کنید و سپس برای دستگاه‌های بزرگ‌تر استایل اضافه کنید.

/* ابتدا طراحی برای موبایل */
body {
    font-size: 14px;
}

/* سپس برای تبلت */
@media (min-width: 600px) {
    body {
        font-size: 16px;
    }
}

/* سپس برای دسکتاپ */
@media (min-width: 1024px) {
    body {
        font-size: 18px;
    }
}

✅ نتیجه: این روش باعث افزایش سرعت لود سایت در موبایل می‌شود.

۷. نتیجه‌گیری

🔹 Media Query به شما امکان می‌دهد استایل‌های مختلفی را برای اندازه‌های مختلف صفحه و دستگاه‌های خاص اعمال کنید.
🔹 با استفاده از Media Query می‌توان طراحی ریسپانسیو (واکنش‌گرا) ایجاد کرد که در موبایل، تبلت و دسکتاپ به‌درستی نمایش داده شود.
🔹 می‌توان چندین شرط را ترکیب کرد تا کنترل بیشتری بر روی نمایش محتوا داشت.
🔹 بهترین روش طراحی Mobile-First است، یعنی ابتدا برای موبایل طراحی کنید و سپس استایل‌های اضافی برای دستگاه‌های بزرگ‌تر اعمال کنید.

با یادگیری و استفاده درست از Media Query، می‌توان وب‌سایت‌هایی مدرن، حرفه‌ای و کاربرپسند طراحی کرد.