विंडो मैचमीडिया ()
उदाहरण 1
क्या स्क्रीन/व्यूपोर्ट 700 पिक्सेल से अधिक चौड़ा है:
if (window.matchMedia("(max-width: 700px)").matches) {
// Viewport is less or equal to 700 pixels wide
} else {
// Viewport is greater than 700 pixels wide
}
परिभाषा और उपयोग
matchMedia()
विधि क्वेरी से परिणामों के साथ MediaQueryList लौटाती है ।
यह सभी देखें:
मीडिया के प्रश्नों
matchMedia()
विधि
के मीडिया प्रश्न CSS @media नियम की कोई भी मीडिया विशेषता हो सकती है , जैसे न्यूनतम-ऊंचाई, न्यूनतम-चौड़ाई, अभिविन्यास, आदि।
उदाहरण
matchMedia("(max-height: 480px)").matches);
matchMedia("(max-width: 640px)").matches);
वाक्य - विन्यास
window.matchMedia(mediaQuery)
मापदंडों
Parameter | Description |
mediaQuery | Required. A string representing a media query. |
प्रतिलाभ की मात्रा
प्रकार | विवरण |
एक वस्तु | मीडिया क्वेरी के परिणामों के साथ एक MediaQueryList ऑब्जेक्ट। |
उदाहरण समझाया
इस पृष्ठ पर पहला उदाहरण मीडिया क्वेरी चलाता है और इसकी तुलना वर्तमान विंडो स्थिति से करता है।
जब भी विंडो की स्थिति बदलती है, तब प्रतिक्रियाशील मीडिया क्वेरी चलाने के लिए, MediaQueryList ऑब्जेक्ट में एक ईवेंट श्रोता जोड़ें (नीचे "अधिक उदाहरण" देखें):
और ज्यादा उदाहरण
यदि व्यूपोर्ट 500 पिक्सेल से कम या उसके बराबर चौड़ा है, तो पृष्ठभूमि का रंग पीला, अन्यथा गुलाबी पर सेट करें:
// Create a match function
function myFunction(x) {
if (x.matches) {
document.body.style.backgroundColor = "yellow";
} else {
document.body.style.backgroundColor = "pink";
}
}
// // Create a MediaQueryList object
const mmObj = window.matchMedia("(max-width: 700px)")
// Call the match function at run time:
myFunction(mmObj);
// Add the match function as a listener for state changes:
mmObj.addListener(myFunction);
ब्राउज़र समर्थन
matchMedia()
सभी आधुनिक ब्राउज़रों में समर्थित है:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 11 | Yes | Yes | Yes | Yes |