CSS @media و Media Queries

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

کاربرد اصلی

هدف اصلی Media Query این است که یک فایل CSS داشته باشیم، اما بسته به شرایط مختلف (مثلاً اگر کاربر با موبایل وارد شد) استایل‌ها متفاوت اعمال شوند.

سینتکس پایه

کد پایه برای استفاده از media query به شکل زیر است:

@media media-type and (condition) {
  /* CSS rules */
}

مثال:

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

در مثال بالا، اگر عرض صفحه‌نمایش از ۷۶۸ پیکسل کمتر شود، پس‌زمینهٔ صفحه آبی روشن می‌شود.

انواع Media Type

می‌توان مشخص کرد که استایل‌ها فقط روی نوع خاصی از دستگاه‌ها اعمال شوند:

all - همهٔ دستگاه‌ها (پیش‌فرض)
screen - نمایشگرها (موبایل، مانیتور)
print - چاپگرها
speech - دستگاه‌هایی که محتوا را با صدا می‌خوانند

انواع شرط‌ها

Media Query می‌تواند بر اساس ویژگی‌های دستگاه شرایط را بررسی کند. رایج‌ترین ویژگی‌ها:

width و height – عرض و ارتفاع صفحه یا پنجره مرورگر
min-width و max-width
orientation – جهت صفحه (landscape یا portrait)
resolution – وضوح صفحه (برای دستگاه‌های با Retina Display)
hover – بررسی توانایی هاور ماوس

مثال:

@media screen and (orientation: portrait) {
  .menu {
    display: none;
  }
}

در مثال بالا، اگر دستگاه در حالت عمودی باشد، منوی سایت پنهان می‌شود.

ترکیب چند شرط

برای ترکیب چند شرط از کلیدواژه‌های and، not و only استفاده می‌شود:

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

استفاده برای طراحی واکنش‌گرا

Media Query نقش مهمی در طراحی واکنش‌گرا دارد. مثلاً می‌توان سایت را برای موبایل، تبلت و دسکتاپ به صورت مجزا استایل داد:

/* موبایل */
@media screen and (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

/* تبلت */
@media screen and (min-width: 601px) and (max-width: 1024px) {
  body {
    font-size: 16px;
  }
}

/* دسکتاپ */
@media screen and (min-width: 1025px) {
  body {
    font-size: 18px;
  }
}

نکات مهم

Media Query باید بعد از استایل‌های پایه در فایل CSS نوشته شود تا بتواند آن‌ها را بازنویسی کند.
از اندازه‌های پرکاربرد مانند 600px، 768px، 1024px، 1200px برای پوشش موبایل، تبلت و دسکتاپ استفاده کنید.
می‌توان Media Query را در فایل جدا نیز نوشت یا مستقیماً در HTML با تگ <link> استفاده کرد.

بهینه‌سازی برای سئو

طراحی واکنش‌گرا که با Media Query انجام می‌شود، امتیاز مثبت سئو دارد چون گوگل به وب‌سایت‌هایی که در همه دستگاه‌ها به‌خوبی نمایش داده می‌شوند، رتبه بالاتری می‌دهد.
استفاده از media query در کنار تصاویر واکنش‌گرا (مثل استفاده از srcset) به تجربه کاربری بهتر و سرعت بیشتر منجر می‌شود.

خطاهای رایج

فراموش‌کردن واحد (مثلاً نوشتن max-width: 768 به‌جای max-width: 768px)
نوشتن Media Query قبل از استایل پایه، که باعث نادیده‌گرفته‌شدن آن می‌شود.
استفادهٔ زیاد و بی‌مورد از media query که کد را پیچیده می‌کند.

منابع بیشتر

تمرین پیشنهادی

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

جمع‌بندی

Media Query ابزاری حیاتی برای طراحی واکنش‌گرا است. با شناخت درست از دستگاه‌ها و ویژگی‌های آن‌ها، می‌توانید تجربهٔ کاربری بهتری در سایت‌تان ایجاد کنید که هم برای کاربر جذاب است و هم برای موتورهای جستجو.