कैसे करें - जावास्क्रिप्ट के साथ मीडिया प्रश्न
उदाहरण
यदि व्यूपोर्ट 700 पिक्सेल से कम या उसके बराबर है, तो पृष्ठभूमि का रंग बदलकर पीला कर दें। यदि यह 700 से अधिक है, तो इसे गुलाबी में बदलें
function myFunction(x) {
if (x.matches) { // If media
query matches
document.body.style.backgroundColor = "yellow";
} else {
document.body.style.backgroundColor = "pink";
}
}
var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call
listener function at run time
x.addListener(myFunction) // Attach listener
function on state changes
जावास्क्रिप्ट के साथ मीडिया क्वेरी का उपयोग करना
मीडिया प्रश्नों को CSS3 में पेश किया गया था, और उत्तरदायी वेब डिज़ाइन के लिए प्रमुख अवयवों में से एक है। सभी उपकरणों (डेस्कटॉप, लैपटॉप, टैबलेट, फोन, आदि) पर वेब पेजों को अच्छा दिखाने के लिए व्यूपोर्ट की चौड़ाई और ऊंचाई निर्धारित करने के लिए मीडिया प्रश्नों का उपयोग किया जाता है।
window.matchMedia () विधि एक MediaQueryList ऑब्जेक्ट देता है जो निर्दिष्ट CSS मीडिया क्वेरी स्ट्रिंग के परिणामों का प्रतिनिधित्व करता है। माचिस मीडिया () पद्धति का मूल्य सीएसएस @मीडिया नियम की कोई भी मीडिया विशेषता हो सकती है , जैसे न्यूनतम-ऊंचाई, न्यूनतम-चौड़ाई, अभिविन्यास, आदि।
हमारे सीएसएस मीडिया क्वेरी ट्यूटोरियल में मीडिया प्रश्नों के बारे में और जानें
हमारे रिस्पॉन्सिव वेब डिज़ाइन ट्यूटोरियल में रिस्पॉन्सिव डिज़ाइन के बारे में अधिक जानें
हमारे जावास्क्रिप्ट संदर्भ में window.matchMedia() पद्धति के बारे में अधिक जानें ।