জাভাস্ক্রিপ্টের সাথে মিডিয়া প্রশ্নগুলি ব্যবহার করার জন্য, কোডটি নিম্নরূপ -
উদাহরণ
<!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-
-এর কম আকারে আকার পরিবর্তন করার সময়