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

জাভাস্ক্রিপ্ট দিয়ে মিডিয়া কোয়েরি ব্যবহার করার কোড নিচে দেওয়া হলো -

উদাহরণ

<!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>

আউটপুট

উপরের কোড ৭০০px-এর বেশি উইন্ডো সাইজে নিচের আউটপুট দেবে -

ব্রাউজার উইন্ডো সাইজ ৭০০px-এর কম করলে -