جادوی Media Query در دنیای طراحی سایت؛ همین الان سایتت رو واکنش‌گرا کن!

تا حالا شده وارد سایتی بشی که توی موبایل به هم ریخته نمایش داده می‌شه؟ یا تو تبلت احساس کنی سایت اصلاً به دنیای لمسی تعلق نداره؟ اینجاست که Media Query تو CSS مثل چراغ جادو وارد میشه—ابزاری که دنیای سایتت رو برای هر دستگاهی متحول می‌کنه! اگه می‌خوای سایتت برای همه کاربران (از موبایلی‌ها گرفته تا مانیتورهای عریض) بی‌نقص باشه، این المقاله برای توست.

Media Query چیست و چرا باید یاد بگیریش؟

Media Query (مدیا کوئری) بخشی از CSS است که به تو این قدرت رو می‌ده تا بسته به شرایط دستگاه (مثل سایز صفحه، رزولوشن، جهت صفحه و…) به طور دینامیک استایل بدی. این یعنی طراحی واکنش‌گرا یا Responsive Design بدون Media Query تقریباً غیرممکنه!

چطور Media Query کار می‌کنه؟

ایده ساده‌ست: فرض کن می‌خوای وقتی کاربر با موبایل وارد سایت میشه، منو براش جمع بشه یا فونت‌ها بزرگ‌تر بشه.
کد Media Query تقریباً این شکلیه:

@media (max-width: 768px) {
  body {
    font-size: 16px;
  }
  .menu {
    display: none;
  }
  .hamburger {
    display: block;
  }
}

توضیح ساده: اگر عرض صفحه کمتر از ۷۶۸ پیکسل باشه (یعنی موبایل و تبلت)، استایل‌های جدیدی اعمال کن!

انواع کاربردهای Media Query

۱. واکنشگرایی فونت و سایزها
اندازه فونت، حاشیه و پدینگ رو نسبت به اندازه صفحه تنظیم کن.
۲. تغییر چینش (Layout)
در دسکتاپ دو ستونه باشه، ولی توی موبایل تک‌ستونه بشه.
۳. مخفی یا جایگزین کردن بخش‌ها
مثلاً اسلایدر، سایدبار یا تبلیغات رو فقط تو نسخه دسکتاپ نشون بده.
۴. تغییر عکس بک‌گراند یا حتی رنگ‌ها
مثلاً توی حالت شب، بک‌گراند دارک‌تر بشه.

رایج‌ترین Breakpointها در Media Query

هر زمان نیاز داشتی، می‌تونی سایزهای خودشخصی‌سازی هم بزنی!

پیشرفته‌ترش رو یاد بگیری؟

می‌تونی شرط‌های چندتایی بذاری! مثلاً فقط برای حالت پرینت، یا فقط وقتی صفحه افقی باشه:

@media (max-width: 600px) and (orientation: landscape) {
  .box {
    background: #ffe600;
  }
}

یا فقط برای چاپ:

@media print {
  body {
    background: #fff;
    color: #222;
  }
}

نکات حرفه‌ای برای استفاده از Media Query

• اول برای موبایل بساز (Mobile First)، بعد حالت‌های بزرگ‌تر رو اضافه کن (min-width).
• واحدهای نسبی (rem، em، %) کار رو راحت‌تر می‌کنن.
• کلاس‌های Bootstrap و فریم‌ورک‌ها، پشت‌پرده از Media Query استفاده می‌کنن.
• استایل‌های مهم‌تر رو انتهای فایل CSS بذار تا حتماً اعمال بشن.
• همیشه سایتت رو تو ابزارهای تست آنلاین مثل Responsinator یا BrowserStack چک کن.

جدول‌وار: کاربردها و مزایای Media Query

خلاصه به زبان آدمیزاد 🎩

Media Query فوت کوزه‌گری CSSـه! باهاش سایتت تو هر موبایلی مثل الماس می‌درخشه و کاربرات عاشق مرتب بودن و سرعتش می‌شن.

برای مطالعه بیشتر

• A Complete Guide to CSS Media Queries – CSS-Tricks
• Responsive Web Design Basics – Google Developers
• MDN Docs: Using media queries

با Media Query سایتتو مثل حرفه‌ای‌ها واکنش‌گرا کن و بدرخش! 😎📱💡