জেভাস্ক্রিপ্ট দিয়ে মিডিয়া কোর্ট কিভাবে ব্যবহার করা যায়

জেভাস্ক্রিপ্ট দিয়ে মিডিয়া কোর্ট ব্যবহার করা

মিডিয়া কোর্ট ক্রিপ্ট সিস্টেমে প্রবর্তিত হয়েছে, এটি রেসপন্সিভ ওয়েব ডিজাইনের একটি কীভুত উপাদান। মিডিয়া কোর্ট ব্যবহার করা হয় দেখুন কী আকারের ভিউপোর্ট আছে, যাতে ওয়েবসাইটটি সমস্ত ডিভাইস (কম্পিউটার, ল্যাপটপ, ট্যাবলেট, মোবাইল ইত্যাদি) একইভাবে দেখা যায়。

window.matchMedia() মেথড একটি MediaQueryList অবজেক্ট ফিরিয়ে দেয়, যা নির্দিষ্ট CSS মিডিয়া কোর্ট স্ট্রিং এর ফলাফলকে প্রতিনিধিত্ব করে。matchMedia() মেথডের মান হতে পারে CSS @media যেকোনো মিডিয়া ফিল্টার এর নিয়ম, যেমন min-height、min-width、অভিমুখ ইত্যাদি。

প্রয়োগ

যদি ভিউপোর্টের প্রশ্নাত্ত বা তার সমান হয়, তবে পিনক রঙকে পিছনের রঙ হিসাবে রাখুন। যদি প্রশ্নাত্ত বড় হয়, তবে তা পিনক রঙকে রাখুন:

function myFunction(x) {
  if (x.matches) { // If media query matches
    document.body.style.backgroundColor = "yellow";
  } else {
    document.body.style.backgroundColor = "pink";
  }
}
// MediaQueryList অবজেক্ট তৈরি করুন
var x = window.matchMedia("(max-width: 700px)");
// রানটাইমে লিস্টিনার ফাংশন ব্যবহার করুন
myFunction(x);
// অবস্থা পরিবর্তনের সময় লিস্টিনার ফাংশন যুক্ত করুন
x.addEventListener("change", function() {
  myFunction(x);
);

আপনার হাতে প্রয়োগ করুন

সংশ্লিষ্ট পাতা

শিক্ষাক্রমঃCSS মিডিয়া কোরিউলেশন

শিক্ষাক্রমঃরেসপন্সিভ ওয়েবসাইট ডিজাইন

পরামর্শ হান্ডবুকঃজেভাস্ক্রিপ্ট window.matchMedia() মেথড