JavaScript Media Query List API

MediaQueryList -objekti

MediaQueryList objekti tallentaa tietoa media-kyselyistä.

MediaQueryList Objekti onIkkuna-objektiominaisuudet.

MediaQueryList objekti voidaan tarkastella seuraavasti:

window.matchMedia() tai pelkästään matchMedia():

Esimerkki

const mqlObj = window.matchMedia();
const mqlObj = matchMedia();

Kokeile itse

Lisätietoja:

window.matchMedia() -menetelmä

MediaQueryList -ominaisuus

ominaisuus Kuvaus
matches 布尔iarvo. Jos dokumentti vastaa kyselyä, true, muuten false.
media Merkkiarvo. Media-kysely (luettelo).

MediaQueryList -menetelmä

Menetelmä Kuvaus
addListener() Lisää uusi kuuntelija-funktio, joka suoritetaan aina kun media-kyselyn arviointitulos muuttuu.
removeListener()

Poista aiemmin lisätty kuuntelija-funktio media-kyselylistasta.

Jos määritetty kuuntelija ei ole luettelossa, ei tehdä mitään toimintaa.

media-kysely

matchMedia() Menetelmän media-kysely voi olla CSS @media -sääntö jokaisesta mediaominaisuudesta, kuten min-height, min-width, orientation jne.

Esimerkki

matchMedia("(max-height: 480px)").matches);
matchMedia("(max-width: 640px)").matches);

Kokeile itse

Media-yhdyskäytteet

Arvo Kuvaus
all Oletus. Käytetään kaikkiin mediayhdyskäytteisiin.
print Käyttää tulostinta.
screen Käyttää tietokoneen näyttöä, tablettea, älypuhelinta jne.
speech Käyttää suuren äänen kanssa "luku" sivua näytönlukijaa.

Media-ominaisuus

Arvo Kuvaus
any-hover Onko minkäänlaista käytettävissä olevaa syöttölaitetta, joka sallii käyttäjän pidättää hiiren osoittimen elementin päällä?
Lisätty Media Queries Level 4:ssa.
any-pointer Onko minkäänlaista käytettävissä olevaa syöttölaitetta, joka on osoitinlaitteena, ja jos on, kuinka tarkka se on?
Lisätty Media Queries Level 4:ssa.
aspect-ratio Näkymän leveys-korkeus suhde.
color Ulostulolaite jokaisen värikomponentin bittimäärä.
color-gamut Käyttäjäagentin ja ulostulolaite tukemien vääristymättömien värejä
Onko pääsyöttömekanismi sallii käyttäjän hiiren osoittimen asettamisen elementin päälle?
Laitteen voi näyttää olevan väriä. color-index
Laitteen voi näyttää olevan väriä. grid
Onko laite ruudukko vai bittikartta. height
Näkymän korkeus. hover
Onko pääsyöttömekanismi sallii käyttäjän hiiren osoittimen asettamisen elementin päälle?
Lisätty Media Queries Level 4:ssa inverted-colors
Lisätty Media Queries Level 4:ssa.
Selain tai alustavirheen hallinta värien kääntäminen? light-level
Nykyinen ympäristön valaistustaso (lisätty Media Queries Level 4:ssa). Näyttöalueen enimmäisleveys-korkeus suhde.
max-color Tulostimen jokaisen värikomponentin enimmäisbitimäärä.
max-color-index Laitteen voi näyttää olevan enimmäisväriä.
max-height Näyttöalueen enimmäiskorkeus, esimerkiksi selainikkuna.
max-monochrome Yksivärisillä (harmaasävyillä) laitteilla jokaisen 'väri' enimmäisbitimäärä.
max-resolution Laitteen enimmäistarkkuus, käytetään dpi tai dpcm.
max-width Näyttöalueen enimmäisleveys, esimerkiksi selainikkuna.
min-aspect-ratio Näyttöalueen vähimmäisleveys-korkeus suhde.
min-color Tulostimen jokaisen värikomponentin vähimmäisbitimäärä.
min-color-index Laitteen voi näyttää olevan vähimmäisväriä.
min-height Näyttöalueen vähimmäiskorkeus, esimerkiksi selainikkuna.
min-monochrome Yksivärisillä (harmaasävyillä) laitteilla jokaisen 'väri' vähimmäisbitimäärä.
min-resolution Laitteen vähimmäistarkkuus, käytetään dpi tai dpcm.
min-width Näyttöalueen vähimmäisleveys, esimerkiksi selainikkuna.
monochrome Yksivärisillä (harmaasävyillä) laitteilla jokaisen 'väri' bittimäärä.
orientation Näkymän suunta (vaakuna- tai pystysuuntainen malli).
overflow-block Kuinka tulostin käsittelee sisälinjauksen ylittävän sisällön (lisätty Media Queries Level 4:ssa)?
overflow-inline Voiko sisälinjauksen ylittävän sisällön liikkua näkymän ulkopuolella (lisätty Media Queries Level 4:ssa)?
pointer Onko pääsyöttömekanismi viiväsinä laite? Jos on, kuinka tarkka se on?
Lisätty Media Queries Level 4:ssa.
resolution Tulostimen tarkkuus, käytetään dpi tai dpcm.
scan Tulostimen skannausprosessi.
scripting Voimmeko käyttää skriptejä (esim. JavaScript)？(lisätty Media Queries Level 4).
update Miten laite voi muuttaa sisällön ulkoasua nopeasti (lisätty Media Queries Level 4).
width Näyttöalueen leveys。