ویندو میچ میڈیا کوئری() کا طریقہ کار

تعریف و استعمال

matchMedia() مетод کوئی کوئری کا نتیجہ درج میں لانے والا MediaQueryList درج کرتا ہے。

دوسرے ملاحظات:

MediaQueryList آئیٹی

میڈیا کوئری

matchMedia() کا میڈیا کوئری کسی سی ایس ایس @media قواعد کی کسی میڈیا کوالٹی کی جگہ کا مشاہدہ کارگر بھیج سکتا ہے، مثلاً min-height، min-width، orientation وغیرہ。

مثال

matchMedia("(max-height: 480px)").matches);

matchMedia("(max-width: 640px)").matches);

مثال

مثال 1

اسکرین/ویجٹ کا چوما 700 پیکسل سے زیادہ ہو کیا؟

if (window.matchMedia("(max-width: 700px)").matches) {
  // ویجٹ کی چوما 700 پیکسل تک یا اس سے کم ہے
}
  // ویجٹ کی چوما 700 پیکسل سے زیادہ ہے
}

خودتان امتحان کنید

مثال کی تفسیر

اس مثال میں میڈیا کوئری کو چلایا جاتا ہے اور یہ بجائی ویندو کی حالت کا مشاہدہ کارگر سے ہم آہنگی کا مشاہدہ کراتا ہے。

اگر بخواهید ویندو کی حالت کی تبدیلی کے موقع پر ریسپانسیو میڈیا کوئری کا مشاہدہ کارگر بھیجیں تو MediaQueryList آئیٹی پر ایک ایوینٹ لیستنر بھیجیں (کامن مثال دیکھیں):

مثال 2

اگر ویجٹ کا چوما کم از 500 پیکسل ہو تو پس منظر کا رنگ زرد رکھیں، نہ تو پس منظر کا رنگ لال رکھیں:

// ماتچ کانوین کا مشاهدہ کارگر تخلیق کریں
function myFunction(x) {
  if (x.matches) {
    document.body.style.backgroundColor = "yellow";
  }
    document.body.style.backgroundColor = "pink";
  }
}
// // MediaQueryList آئیٹی کا تخلیق کریں:
const mmObj = window.matchMedia("(max-width: 700px)");
// رونق میں match کانوین کا مشاهدہ کارگر بھیجیں:
myFunction(mmObj);
// match کانوین کا مشاهدہ کارگر (listener) بھیجیں:
mmObj.addListener(myFunction);

خودتان امتحان کنید

قواعد

window.matchMedia("mediaQuery)

پارامتر

پارامتر وصف
mediaQuery ضروری. میڈیا کوآرڈینٹس کا سٹرنگ نمائش کرنا ہوتا ہے.

بازگشت

نوع وصف
آوٹھم میڈیا کوآرڈینٹس لیست آوٹھم جو میڈیا کوآرڈینٹس کوآرڈینٹس کا نتیجہ دیتا ہے。

بروزر پشتیبندگی

تمام بروزروں کا تعاون کیا گیا ہے matchMedia():

کروم آئی ای ایج فائرفاکس سافری آپرا
کروم آئی ای ایج فائرفاکس سافری آپرا
پشتیبندگی 11 پشتیبندگی پشتیبندگی پشتیبندگی پشتیبندگی