استفاده از media queries در CSS — مقدمه و اهمیت

Media queries یکی از ابزارهای کلیدی در طراحی واکنش‌گرا (Responsive) است که به شما امکان می‌دهد استایل‌ها را بر اساس ویژگی‌های دستگاه یا محیط نمایش تغییر دهید. با کمک media queries می‌توانید چینش، اندازه متن، تصاویر و حتی رفتار عناصر را برای موبایل، تبلت، دسکتاپ و چاپ بهینه کنید.

چرا از media queries استفاده کنیم؟

• افزایش خوانایی و کاربری در ابعاد مختلف صفحه‌نمایش
• کاهش بار شبکه با بارگذاری استایل‌ها و تصاویر مناسب
• پشتیبانی از کاربران با نیازهای خاص مانند prefers-reduced-motion یا prefers-color-scheme
• قابلیت تعریف شرایط چاپ جداگانه (@media print)

سینتکس پایه

نمونه ساده از تعریف media query به شکل زیر است:

@media (min-width: 768px) {
  .container {
    width: 720px;
  }
}

در این مثال وقتی عرض viewport بیشتر یا مساوی 768px باشد، کلاس .container عرض 720px خواهد داشت. این روش مخصوص رویکرد mobile-first است: ابتدا استایل پایه برای موبایل نوشته می‌شود و سپس با min-width تغییرات برای صفحه‌های بزرگ‌تر اعمال می‌شود.

مثال — شبکه (Grid) واکنش‌گرا

/* Base (mobile-first) */.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* Tablet */@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop */@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

این کد یک شبکه پایه برای موبایل ایجاد می‌کند و با شکستن در نقاط شکست (breakpoints) به دو و سه ستون برای تبلت و دسکتاپ تغییر می‌کند. مزیت mobile-first این است که کاربران موبایل فقط استایل‌های پایه را لود می‌کنند و تغییرات اضافی تنها در صورتی اعمال می‌شوند که نیاز باشد.

نکات عملی درباره breakpoints

نقاط شکست باید براساس محتوا تعیین شوند نه صرفاً اندازه‌های دستگاه. جدول زیر نقاط شکست رایج را نشان می‌دهد (پیشنهادی):

ترکیبات منطقی و انواع مدیا

می‌توانید ویژگی‌ها را با عملگرهای and, not, و کاما (عملگر OR) ترکیب کنید:

@media screen and (min-width: 600px) and (max-width: 900px) { ... }

@media not print and (min-resolution: 2dppx) { ... }

/* OR: applies to screens OR when width >= 1200px */@media screen, (min-width: 1200px) { ... }

در این مثال‌ها توجه کنید که media type مانند screen یا print می‌تواند مشخص شود یا حذف شود (پیش‌فرض all است). استفاده از max-width برای رویکرد desktop-first و min-width برای mobile-first مناسب است.

ویژگی‌های مفید دیگر در media queries

• orientation: portrait | landscape — برای تنظیم در حالت عمودی یا افقی
• resolution / dppx: برای تصاویر با رزولوشن بالا (Retina)
• prefers-color-scheme: light | dark — برای حالت تاریک/روشن
• prefers-reduced-motion: reduce — کاهش انیمیشن‌ها برای کاربران حساس
• pointer, hover: برای شناسایی نوع ورودی (لمسی یا ماوس)

مثال — حالت تاریک و کاهش حرکت

@media (prefers-color-scheme: dark) {
  body {
    background: #111;
    color: #eee;
  }
}

@media (prefers-reduced-motion: reduce) {
  .carousel {
    animation: none;
  }
}

در کد بالا، اگر کاربر حالت تاریک را در سیستم‌عاملش فعال کرده باشد، استایل‌های مناسب اعمال می‌شود. همچنین اگر کاربر خواهان کاهش انیمیشن است، چرخنده (carousel) متوقف می‌شود؛ این موضوع به دسترس‌پذیری کمک زیادی می‌کند.

لینک کردن فایل CSS بر اساس مدیا

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

<link rel="stylesheet" href="print.css" media="print">

این روش مخصوصاً برای استایل‌های چاپ مفید است و باعث می‌شود مرورگر فقط زمانی فایل را اعمال یا در برخی موارد بارگذاری کند که لازم است.

بهینه‌سازی و بهترین شیوه‌ها

• از mobile-first استفاده کنید (استفاده از min-width) تا بار اضافی برای موبایل کاهش یابد.
• نقاط شکست را براساس محتوا و نه صرفاً اندازه دستگاه تعیین کنید.
• به‌جای تعریف تعداد زیاد breakpoints برای هر پیکسل، از واحدهای نسبی (em/rem) برای احترام به تنظیمات فونت کاربران استفاده کنید.
• برای تایپوگرافی روان‌تر از clamp() یا ترکیب vw و min-max استفاده کنید تا نیاز به queries کم شود.
• از ویژگی‌های دسترس‌پذیری مانند prefers-reduced-motion و prefers-color-scheme استفاده کنید.
• از رسانه‌های پیچیده و پرمصرف در media queries کمتر استفاده کنید تا محاسبات رندر را سبک نگه دارید.

نمونه بهینه — استفاده از clamp برای فونت

h1 {
  font-size: clamp(1.5rem, 2.5vw + 0.5rem, 3rem);
}

استفاده از clamp باعث می‌شود اندازه متن بین حداقل و حداکثر مشخصی به صورت روان با پهنای صفحه تغییر کند و در بسیاری از موارد نیاز به media queries جداگانه برای فونت‌ها را کاهش می‌دهد.

چالش‌ها و محدودیت‌ها

هرچند media queries قدرتمندند، اما نباید تنها ابزار برای همه مشکلات ریسپانسیو باشند. برای ساختارهای پیچیده ممکن است نیاز به جاوااسکریپت، container queries (برای اندازهٔ المان به جای viewport) یا تغییرات سمت سرور وجود داشته باشد. همچنین برخی ویژگی‌ها در همه مرورگرها پشتیبانی کامل ندارند؛ پیش از استفاده از ویژگی‌های جدید، سطح پشتیبانی را بررسی کنید.

جمع‌بندی

Media queries بخش ضروری طراحی واکنش‌گرا هستند. با استفاده از رویکرد mobile-first، تعیین نقاط شکست مبتنی بر محتوا، بهره‌گیری از ویژگی‌های دسترس‌پذیری و بهینه‌سازی با تکنیک‌هایی مانند clamp، می‌توانید تجربهٔ یکنواخت و بهینه‌ای برای کاربران در دستگاه‌های مختلف فراهم کنید.

لطفاً از کمبود ها و مشکلات این محتوا برای ما بنویسید

ارسال