Hoe OM - Medianavrae met JavaScript
Voorbeeld
As die kykpoort minder as, of gelyk aan, 700 pieksels wyd is, verander die agtergrondkleur na geel. As dit groter as 700 is, verander dit na pienk
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
Gebruik medianavrae met JavaScript
Medianavrae is in CSS3 bekendgestel en is een van die sleutelbestanddele vir responsiewe webontwerp. Medianavrae word gebruik om die breedte en hoogte van 'n uitsigpoort te bepaal om webbladsye goed te laat lyk op alle toestelle (rekenaars, skootrekenaars, tablette, fone, ens.).
Die window.matchMedia() -metode gee 'n MediaQueryList-objek terug wat die resultate van die gespesifiseerde CSS-medianavraagstring verteenwoordig. Die waarde van die matchMedia()-metode kan enige van die mediakenmerke van die CSS @media-reël wees, soos min-hoogte, min-breedte, oriëntasie, ens.
Kom meer te wete oor medianavrae in ons CSS- medianavrae- tutoriaal
Kom meer te wete oor responsiewe ontwerp in ons responsiewe webontwerptutoriaal
Kom meer te wete oor die window.matchMedia() metode in ons JavaScript-verwysing.