matchMedia()
1-misol
Ekran/viewport kengligi 700 pikseldan kattami:
if (window.matchMedia("(max-width: 700px)").matches) {
// Viewport is less or equal to 700 pixels wide
} else {
// Viewport is greater than 700 pixels wide
}
O‘zingiz sinab ko‘ring »
Tavsif
matchMedia() metodi so‘rov natijalari bilan MediaQueryList qaytaradi.
Shuningdek qarang:
Media so‘rovlar
matchMedia() metodining media so‘rovlari CSS @media qoidasining istalgan media xususiyati bo‘lishi mumkin: min-height, min-width, orientation va h.k.
Misollar
matchMedia("(max-height: 480px)").matches);
matchMedia("(max-width: 640px)").matches);
Sintaksis
window.matchMedia(mediaQuery)
Parametrlar
| Parametr | Tavsif |
| mediaQuery | Majburiy. Media so‘rovni ifodalovchi string. |
Qaytariladigan qiymat
| Tip | Tavsif |
| Obyekt | Media so‘rov natijalari bilan MediaQueryList obyekti. |
Misollar izohi
Bu sahifadagi birinchi misol media so‘rovni bajaradi va uni oynaning joriy holati bilan solishtiradi.
Oyna holati o‘zgargan har safar moslashuvchan (responsive) media so‘rovni bajarish uchun MediaQueryList obyektiga hodisa tinglovchisini qo‘shing (quyidagi "Ko‘proq misollar" bo‘limiga qarang):
Ko‘proq misollar
Agar viewport kengligi 500 pikselga teng yoki undan kichik bo‘lsa, fon rangini sariqqa, aks holda pushti rangga o‘rnating:
// 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: 500px)")
// Call the match function at run time
myFunction(mmObj);
// Add the match function as a listener for state changes
mmObj.addEventListener("change", function() {
myFunction(mmObj);
});
O‘zingiz sinab ko‘ring »
Brauzerlarda qo‘llab-quvvatlash
matchMedia() barcha zamonaviy brauzerlarda qo‘llab-quvvatlanadi:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Ha | Ha | Ha | Ha | Ha | 11 |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!