How TO - Media Query with JavaScript
Příklad
Pokud je výřez menší nebo roven 700 pixelům na šířku, změňte barvu pozadí na žlutou. Pokud je větší než 700, změňte ji na růžovou
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
Použití dotazů na média s JavaScriptem
Dotazy na média byly zavedeny v CSS3 a jsou jednou z klíčových složek pro responzivní webdesign. Mediální dotazy se používají k určení šířky a výšky zobrazované oblasti, aby webové stránky vypadaly dobře na všech zařízeních (stolní počítače, notebooky, tablety, telefony atd.).
Metoda window.matchMedia() vrací objekt MediaQueryList představující výsledky zadaného řetězce dotazu na média CSS. Hodnota metody matchMedia() může být jakákoliv z mediálních funkcí pravidla CSS @media , jako je minimální výška, minimální šířka, orientace atd.
Další informace o mediálních dotazech naleznete v našem výukovém programu CSS Media Queries
Další informace o responzivním designu naleznete v našem výukovém programu pro responzivní webdesign
Další informace o metodě window.matchMedia() naleznete v naší příručce JavaScript.