Window matchMedia() মথড

সংজ্ঞা ও ব্যবহার

matchMedia() মথড কার্যকারিতা মিডিয়া কোয়ালিফাইয়ার কোন কোন কোয়ালিফাইয়ার ফলাফল নিয়ে একটি MediaQueryList ফিরিয়ে দেয়

আরও দেখুন:

MediaQueryList অবজেক্ট

মিডিয়া কোয়ালিফাইয়ার

matchMedia() মথড এর মিডিয়া কোয়ালিফাইয়ার হতে পারে CSS @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 ফাংশনটিকে অবস্থা পরিবর্তনের অবলোকক হিসাবে যোগ করুন：
mmObj.addListener(myFunction);

স্বয়ং প্রয়োগ করুন

গ্রামার

window.matchMedia("mediaQuery)

পারামিটার

পারামিটার বর্ণনা
mediaQuery প্রয়োজনীয়।মিডিয়া কোয়েরিজের স্ট্রিং প্রদর্শন করা হয়

ফলাফল

ধরন বর্ণনা
অবজেক্ট মিডিয়া কোয়েরিজের ফলাফল নিয়ে থাকা MediaQueryList অবজেক্ট

ব্রাউজার সমর্থন

সমস্ত ব্রাউজারগুলি সমর্থন করে matchMedia()：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
সমর্থন 11 সমর্থন সমর্থন সমর্থন সমর্থন