कैसे JavaScript के द्वारा मीडिया क्वेरी का उपयोग करें

JavaScript के द्वारा मीडिया क्वेरी का उपयोग करना

मीडिया क्वेरी CSS3 में पेश की गई है और यह रिस्पोंसिव वेब डिजाइन के महत्वपूर्ण घटकों में से एक है। मीडिया क्वेरी विन्यास की चौड़ाई और ऊंचाई को निर्धारित करती है ताकि वेब पृष्ठ सभी उपकरणों (डेस्कटॉप, लैपटॉप, टैबलेट, मोबाइल आदि) पर अच्छी तरह से दिखाया जा सके。

window.matchMedia() विधि एक MediaQueryList ऑब्जैक्ट वापस देता है जो निर्दिष्ट CSS मीडिया क्वेरी स्ट्रिंग के परिणाम को प्रस्तुत करता है。matchMedia() विधि का मूल्य हो सकता है CSS @media किसी भी मीडिया फ़ीचर के नियम के लिए min-height、min-width、दिशा आदि。

उदाहरण

यदि विन्यास की चौड़ाई 700 पिक्सल से कम या समान है, तो पृष्ठ का पृष्ठभूमि रंग पीला बनाएं। यदि चौड़ाई 700 पिक्सल से अधिक है, तो उसे गुलाबी बनाएं:

function myFunction(x) {
  if (x.matches) { // यदि मीडिया क्वेरी में मेल होता हैIf media query matches
    document.body.style.backgroundColor = "yellow";
  } अन्यथा {
    document.body.style.backgroundColor = "pink";
  }
}
// MediaQueryList ऑब्जैक्ट बनाएं
var x = window.matchMedia("(max-width: 700px)");
// रनटाइम में सुनावारी फ़ंक्शन बुला लें
myFunction(x);
// स्थिति परिवर्तन के समय सुनावारी फ़ंक्शन जोड़ें
x.addEventListener("change", function() {
  myFunction(x);
});

अपने आप साफल्य प्रयोग करें

संबंधित पृष्ठ

तालीमीकरण：CSS मीडिया क्वेरी

तालीमीकरण：प्रतिक्रियाशील वेब पृष्ठ डिजाइन

संदर्भ पुस्तिका：JavaScript window.matchMedia() विधि