تعریفی از مدیا کوئری

مدیا کوئری را می توان مثل یک شرط برای مرورگر دید که اگر آن شرط بر قرار باشد مرورگر استایل های مشخص شده را تفسیر و اعمال می کند.

مدیاکوئری چه کاری انجام می دهد؟

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

مثالی میزنیم :

مدیا کوئری ها بخشی از یک فایل css هستند. بیایید همان مثال قبل را بررسی کنیم. در این مثال گفتیم که می خواهیم رنگ متن سایت در دسکتاپ قرمز باشد و در موبایل سبزرنگ باشد.

p {
color: green;
}

@media only screen and (min-width:900px)
{ p
{
color: red;
}
در استایل فوق، مدیاکوئری را تعریف کرده ایم و گفتیم که اگر عرض اسکرین دستگاه کاربر از ۹۰۰ پیکسل بزرگتر بود (min-width:900px)، رنگ متن قرمز شود.
}