مدیا کوئری
مدیا کوئری (Media Queries) در CSS یک ابزار قدرتمند برای طراحی واکنش‌گرا (Responsive Design) است که امکان تغییر ظاهر وب‌سایت بر اساس اندازه صفحه، وضوح تصویر و ویژگی‌های دستگاه را فراهم می‌کند. همان‌طور که هنگام ساخت یک خانه باید هر اتاق را متناسب با کاربری آن طراحی و تزئین کنیم، در طراحی وب نیز باید عناصر مختلف سایت را با توجه به اندازه و نوع دستگاه بازدیدکننده تنظیم کنیم.
در فروشگاه‌های آنلاین، مدیا کوئری‌ها باعث می‌شوند کارت‌های محصول و دکمه‌ها در موبایل‌ها و تبلت‌ها به‌خوبی نمایش داده شوند و تجربه خرید کاربر بهینه شود. در وب‌سایت‌های خبری، فونت‌ها و تصاویر بر اساس عرض صفحه تنظیم می‌شوند تا خوانایی حفظ شود. در وبلاگ‌های شخصی و پرتال‌های دولتی، فرم‌ها و جداول به صورت مناسب برای هر دستگاه ارائه می‌شوند.
در این آموزش، شما یاد می‌گیرید چگونه مدیا کوئری‌های پایه و پیشرفته بسازید، از ویژگی‌های min-width، max-width و orientation استفاده کنید و آن‌ها را در پروژه‌های واقعی به کار ببرید. درست مانند سازمان‌دهی یک کتابخانه که یافتن کتاب‌ها را آسان می‌کند، ساختار صحیح مدیا کوئری‌ها باعث می‌شود محتوای سایت برای تمام کاربران قابل دسترس و خوانا باشد.
مثال پایه
css/* مثال پایه مدیا کوئری */
body {
font-size: 16px; /* اندازه فونت پیش‌فرض */
background-color: #f8f8f8; /* رنگ پس‌زمینه پیش‌فرض */
}
/* اعمال استایل برای صفحات با عرض کمتر از 768px */
@media (max-width: 768px) {
body {
font-size: 14px; /* فونت کوچک‌تر برای موبایل */
background-color: #eaeaea; /* پس‌زمینه روشن‌تر برای خوانایی */
}
}در این مثال ابتدا استایل‌های پیش‌فرض برای تمامی دستگاه‌ها تعریف شده است. سپس با استفاده از @media بررسی می‌کنیم که آیا عرض صفحه برابر یا کمتر از 768px است یا خیر. اگر شرط برقرار باشد، استایل‌های داخل بلاک اعمال می‌شوند.
ویژگی max-width باعث می‌شود این استایل‌ها فقط روی دستگاه‌های کوچک‌تر مثل تبلت‌ها و موبایل‌ها اعمال شوند. این روش در وبلاگ‌ها و سایت‌های خبری برای حفظ خوانایی و در فروشگاه‌های آنلاین برای جلوگیری از برهم‌ریختگی کارت‌های محصول بسیار کاربردی است. می‌توان گفت مدیا کوئری‌ها مانند تنظیم چیدمان مبلمان در یک اتاق کوچک هستند تا هم زیبایی و هم عملکرد حفظ شود.
مثال کاربردی
css/* مثال کاربردی برای فروشگاه آنلاین */
.container {
display: grid; /* استفاده از CSS Grid برای چیدمان */
grid-template-columns: repeat(3, 1fr); /* سه ستون برابر */
gap: 20px; /* فاصله بین عناصر */
}
.product {
background-color: #ffffff;
padding: 15px;
border-radius: 8px;
}
/* دستگاه‌های تبلت */
@media (max-width: 1024px) {
.container {
grid-template-columns: repeat(2, 1fr); /* دو ستون */
}
}
/* دستگاه‌های موبایل */
@media (max-width: 600px) {
.container {
grid-template-columns: 1fr; /* ستون واحد */
}
}در این مثال از CSS Grid برای چیدمان کارت‌های محصول استفاده شده است. ابتدا سه ستون تعریف شده است و هر کارت دارای پس‌زمینه سفید، padding و گوشه‌های گرد است.
مدیا کوئری اول برای تبلت‌ها اعمال شده و ستون‌ها به دو ستون کاهش می‌یابند. مدیا کوئری دوم برای موبایل‌ها اعمال شده و تنها یک ستون نمایش داده می‌شود. این اطمینان می‌دهد که ناوبری و خوانایی در تمام دستگاه‌ها حفظ شود. مشابه این روش را می‌توان در وبلاگ‌ها و پرتفولیوها برای مرتب‌سازی مقالات یا پروژه‌ها استفاده کرد تا تجربه کاربری همیشه مطلوب باشد.
بهترین شیوه‌ها شامل طراحی mobile-first، یعنی ابتدا استایل‌ها برای دستگاه‌های کوچک و سپس توسعه به صفحات بزرگ‌تر، است که به بهینه‌سازی عملکرد کمک می‌کند. مدیا کوئری‌ها را به‌صورت منطقی سازمان‌دهی کنید، از تکرارهای غیرضروری خودداری کنید و از نام‌گذاری واضح کلاس‌ها استفاده کنید تا تضادهای specificity کاهش یابد.
اشتباهات رایج شامل نادیده گرفتن کاربران موبایل، تعیین breakpointهای نامناسب، بازنویسی بیش از حد قوانین و تو در تو کردن بیش از حد مدیا کوئری‌ها است. برای دیباگ، از DevTools استفاده کنید و در دستگاه‌های مختلف تست کنید. توصیه‌ها: breakpointها را براساس محتوا تعریف کنید، CSS را به‌صورت ماژولار سازمان‌دهی کنید و همیشه خوانایی و استفاده‌پذیری را تست کنید، همانند سازمان‌دهی یک کتابخانه برای دسترسی آسان به همه کتاب‌ها.
📊 مرجع سریع
| Property/Method | Description | Example |
|---|---|---|
| @media | تعریف مدیا کوئری | @media (max-width: 768px) { ... } |
| min-width | max-width | تنظیم محدوده عرض صفحه |
| orientation | تشخیص جهت دستگاه | @media (orientation: landscape) { ... } |
| hover | اعمال استایل بر اساس قابلیت اشاره | @media (hover: hover) { ... } |
| pointer | مشخص کردن نوع دستگاه ورودی | @media (pointer: coarse) { ... } |
در جمع‌بندی، مدیا کوئری‌ها ابزار کلیدی برای طراحی واکنش‌گرا هستند و اجازه می‌دهند استایل‌ها بر اساس عرض صفحه، جهت و ویژگی‌های دستگاه تغییر کنند و تجربه کاربری بهینه شود. آن‌ها ارتباط مستقیمی با ساختار HTML دارند، زیرا کانتینرهای مرتب‌شده آسان‌تر قابل تنظیم هستند و با JavaScript می‌توان رفتار و ظاهر را پویا تغییر داد.
گام‌های بعدی: مطالعه CSS Grid و Flexbox همراه با مدیا کوئری‌ها، ایجاد Layoutهای تعاملی و واکنش‌گرا. تمرین مستمر و تست در دستگاه‌های مختلف مهارت شما را تقویت می‌کند و امکان ساخت سایت‌های حرفه‌ای و قابل دسترس را فراهم می‌آورد، همانند سازمان‌دهی کتابخانه یا چیدمان خانه برای هر بازدیدکننده.
🧠 دانش خود را بیازمایید
آزمون دانش شما
درک خود از این موضوع را با سوالات کاربردی بسنجید.
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود