কম্পিউটার

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


জাভাস্ক্রিপ্টের সাথে মিডিয়া প্রশ্নগুলি ব্যবহার করার জন্য, কোডটি নিম্নরূপ -

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      color: white;
      padding: 20px;
   }
</style>
</head>
<body>
<h1>Using media queries with JavaScript Example</h1>
<h2>Resize the screen to see the color change from blue to red</h2>
<script>
   var mediaQuery = window.matchMedia("(max-width: 700px)");
   function setColor(mediaQuery) {
      if (mediaQuery.matches) {
         document.body.style.backgroundColor = "red";
      } else {
         document.body.style.backgroundColor = "blue";
      }
   }
   setColor(mediaQuery);
   mediaQuery.addListener(myFunction);
</script>
</body>
</html>

আউটপুট

উপরের কোডটি 700px -

এর চেয়ে বেশি উইন্ডো আকারে নিম্নলিখিত আউটপুট তৈরি করবে

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

ব্রাউজার উইন্ডোর আকার 700px-

-এর কম আকারে আকার পরিবর্তন করার সময়

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


  1. কিভাবে জাভাস্ক্রিপ্ট দিয়ে একটি সিনট্যাক্স হাইলাইটার তৈরি এবং ব্যবহার করবেন?

  2. জাভাস্ক্রিপ্ট দিয়ে মিডিয়া প্রশ্ন কিভাবে ব্যবহার করবেন?

  3. জাভাস্ক্রিপ্টের সাথে একটি অ্যানিমেটেড প্রভাব তৈরি করতে আইকনগুলি কীভাবে ব্যবহার করবেন?

  4. CSS এর সাথে সাধারণ ডিভাইস ব্রেকপয়েন্টের জন্য মিডিয়া প্রশ্নগুলি কীভাবে ব্যবহার করবেন?