Miten käyttää JavaScriptiä media-kuunteluihin
- Edellinen sivu Kuullutettavat HTML-elementit
- Seuraava sivu Syntaksin korostaja
Käytä JavaScriptiä media-kuunteluihin
Media-kuuntelut lisättiin CSS3:ssa ja ne ovat yksi vastuullisimmista elementeistä responsiivisessa Web-suunnittelussa. Media-kuuntelut määrittävät näytön leveyden ja korkeuden, jotta verkkosivut näyttävät hyvin kaikilla laitteilla (tietokoneet, kannettavat tietokoneet, tabletit, puhelimet jne.).
window.matchMedia() metodi palauttaa MediaQueryList-objektin, joka edustaa määritettyyn CSS-mediakuunteluun liittyvää tulosta.matchMedia() menetelmän arvo voi olla CSS @media mikä tahansa media-ominaisuus, esimerkiksi min-height、min-width、suunta jne.
Esimerkki
Jos näytön leveys on 700 pixelin tai pienempi, muuta taustaväri keltaiseksi. Jos leveys on yli 700 pixeliä, muuta se vaaleanpunaiseksi:
function myFunction(x) {
if (x.matches) { // Jos media-kuuntelu vastaaIf media query matches
document.body.style.backgroundColor = "yellow";
} else {
document.body.style.backgroundColor = "pink";
}
}
// Luo MediaQueryList-objekti
var x = window.matchMedia("(max-width: 700px)");
// Kutsu kuuntelija toiminnolle ajastettuna
myFunction(x);
// Lisää kuuntelija toiminnolle tilan muuttuessa
x.addEventListener("change", function() {
myFunction(x);
);
Liittyvät sivut
Oppaat:CSS media kysely
- Edellinen sivu Kuullutettavat HTML-elementit
- Seuraava sivu Syntaksin korostaja
