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

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

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

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

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

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

p {
color: green;
}
رنگ متن در حالت عادی سبز باشد 👆


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

➖➖➖➖➖➖➖
✅ @WorldCode