مدیا کوئری‌ها

استفاده از مدیا کوئری‌ها (Media Query) در واقع روشی است که بتوانیم برای دستگاه‌های مختلف که ویژگی‌های متفاوتی دارند استایل‌های CSS متفاوتی را تعریف کنیم. این ایده اولین بار در CSS نسخه‌ی 2 تحت عنوان دستورهای media@ معرفی شد اما اقبال چندانی نیافت. در نسخه‌ی سوم CSS این امکان به شکل کوئری‌های مدیا درآمد که به جای بررسی نوع دستگاه، قابلیت‌های هر دستگاه را بررسی می‌کند.

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

نحوه استفاده از مدیا کوئری

ساختار کلی یک مدیا کوئری به شکل زیر است:

@media not|only mediatype and (expressions) {
  CSS-Code;
}

در واقع مجموع دستورهای CSS را با این ساختار گروه‌بندی می‌کنیم و هرکدام از دسته‌ها که با شرایط مدیای خود بخواند، اجرا می‌شوند. شرایط مدیا شامل mediatype و شروط expressions هستند که هر دو باید در وضعیت true قرار بگیرند تا کدهای درون مدیا اجرا شود.

اگر از only به عنوان محدودکننده و از not به عنوان منفی‌کننده استفاده نکنید، مشخص کردن نوع mediatype اختیاری است و اگر استفاده نشود همه انواع دستگاه‌ها مد نظر قرار می‌گیرد. انواع واژگانی که می‌توانید به عنوان mediatype به کار ببرید به شرح زیر است:

همچنین شرطی که می‌خواهیم به دستگاه انتخابی اعمال شود را در قسمت expressions به کار می‌بریم. شروط زیادی وجود دارند که شامل طول و عرض دستگاه، طول و عرض نمایش‌گر، جهت دستگاه، رزولوشن و غیره می‌شود. مهم‌ترین موارد شرطی را در جدول زیر مشاهده می‌کنید و برای موارد کم‌مصرف‌تر می‌توانید گوگل کنید:

چند مثال

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

@media only screen and (max-width: 320px){
  body{
    color: red;
  }
}

می‌خواهیم بنویسیم اگر صفحه وب افقی باشد اندازه فونت 14 و در غیر این صورت 12 پیکسل باشد. می‌توان نوشت:

@media only screen and (orientation: landscape) {
  body {
    font-size: 14px;
  }
}
@media only screen and (orientation: portrait) {
  body {
    font-size: 12px;
  }
}

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

@media only screen and (min-aspect-ratio: 3/2){
  body{
    background-color: #ccc;
  }
}

می‌خواهیم اگر طول صفحه وب بیشتر از 300 پیکسل باشد، برای عرض‌های کم‌تر از 320 پیکسل یا عرض‌های بیش‌تر از 1000 پیکسل، رنگ پس‌زمینه آبی شود. با استفاده از کاما‌ به عنوان اوپراتور OR می‌توان نوشت:

@media (min-height: 300px) and (max-width: 320px),
       (min-height: 300px) and (min-width: 1000px) {
  body{
    background-color: blue;
  }
}

سخن آخر

تا این‌جا همه چیز سرراست است. یک مطلب باقی می‌ماند و آن این‌که اگر بخواهیم از فایل‌های CSS خارجی استفاده کنیم و هر فایل را مخصوص شرایط خاص طراحی کرده و بسته به وقوع آن شرط در کد HTML خود لود کنیم می‌توانیم شرط‌های مدیا را در کد HTML خود به صورت زیر به کار ببریم:

<link rel="stylesheet" media="not|only mediatype and (expressions)" href="style.css">

همان‌طور که می‌بینید ترکیب بسیار شبیه به موارد توضیح داده شده است. در واقع هم mediatype و هم expressions داخل attribute مدیا قرار می‌گیرند و اگر صحت هردو برقرار باشد، فایل style.css لود می‌شود.