CSS @media-säännöt

Määrittely ja käyttö

@media-säännöt käytetään media-kyselyissä erilaisten mediatyypien/laitteiden tyylejä varten.

Media-kyselyjä voidaan käyttää monien asioiden tarkistamiseen, kuten:

  • Näytön leveys ja korkeus
  • Laitteen leveys ja korkeus
  • Suunta (onko puhelin tai tabletti horisontaalissa tai vertikaalisessa asennossa?)
  • Resoluutio

Media-kyselyjen käyttö on suosittu teknologia, jota käytetään tarjoamaan räätälöityjä tyylejä työpöytälapille, kannettavalle tietokoneelle, tabletille ja puhelimelle (vastauskykyinen verkkosivujen suunnittelu).

Voit käyttää media-kyselyjä määrittääksesi tiettyjä tyylejä vain tulostettaville asiakirjoille tai näkövammaisille lukijoille (mediatyyppi: tulostus, näyttö tai puhe).

Media-tyypin lisäksi on myös media-ominaisuuksia. Media-ominaisuudet tarjoavat media-kyselyille enemmän tarkkoja yksityiskohtia mahdollistaen käyttäjäagentin tai näyttölaitteen tiettyjen ominaisuuksien testaamisen. Esimerkiksi voit soveltaa tyylejä vain tietyn leveyden ylittäviin tai alle jääviin näytöihin.

Katso myös:

CSS-opas:CSS median kyselyt

CSS-opas:CSS media-kysely-esimerkki

RWD-opas:Saavuta vastaanottavainen Web-suunnittelu media-kyselyillä

JavaScript-referenssikirja:window.matchMedia()-menetelmä

Esimerkki

Esimerkki 1

Jos selaimen ikkunan leveys on 600px tai pienempi, muuta <body>-elementin taustaväriä 'vaaleaksi sinertävään':

@media only screen and (max-width: 600px) {
  body {
    background-color: vaaleansininen;
  }
}

kokeile itse

Lisää TIY-esimerkkejä löytyy sivun alalta.

CSS-grammatiikka

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
  CSS-koodi;
}

not, only ja and-käyttöehtojen merkitys:

not: not-käyttöehto kääntelee koko media-kyselyn merkitystä.

only: only-käyttöehto estää vanhojen selaimien soveltamisen määritettyjä tyylejä, jotka eivät tue media-ominaisuuksilla varustettuja media-kyselyitä. Se ei vaikuta nykyaikaisiin selaimiin.

and: and-käyttöehto yhdistää media-ominaisuuden media-tyypin tai muihin media-ominaisuuksiin.

Ne ovat kaikki valinnaisia. Jos kuitenkin käytetään not tai only, media-tyyppiä täytyy myös määritellä.

Voit käyttää eri tyylejä eri media-tyypille, kuten näin:

<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
....

media-tyyppi

arvo kuvaus
all oletusarvo. Käytetään kaikkiin media-tyypin laitteisiin.
print tarkoitettu tulostimelle.
screen tarkoitettu tietokoneen näytölle, tabletille, älypuhelimelle jne.
speech lukemiseen tarkoitettu näytön lukija sivulla.

media-ominaisuus

arvo kuvaus
any-hover

Onko käytettävissä mitään syöttömekanismia, joka sallii käyttäjän (hiiren jne.) asettua elementin päälle?

Lisätty Media Queries Level 4:ssä.
any-pointer

Onko käytettävissä mitään viittauslaitetta olevaa syöttömekanismia, jos on, kuinka tarkka se on?

Lisätty Media Queries Level 4:ssä.
aspect-ratio Näyttökohden (viewport) leveyskorkeussuhde.
color

Lähtölaitteen jokaisen pikselin bittiarvo, yleisiä ovat 8, 16, 32 bittiä.

Jos laite ei tue väripainoa, arvo on 0.
color-gamut

Käyttäjäagentin ja lähtölaitteen suuntaa-antavasti tuettu väryalue.

Lisätty Media Queries Level 4:ssä.
color-index

Lähtölaitteen värimapakirjan (värimapahaku) kohteiden määrä.

Jos laite ei käytä värimapakirjaa, arvo on 0.
device-aspect-ratio

Lähtölaitteen leveyskorkeussuhde.

Hylätty Media Queries Level 4:ssä.
device-height

Lähtölaitteen renderöintipinnan (esim. näytön) korkeus.

Hylätty Media Queries Level 4:ssä.
device-width

Lähtölaitteen renderöintipinnan (esim. näytön) leveys.

Hylätty Media Queries Level 4:ssä.
display-mode

Sovelluksen näyttötila, kuten web-sovelluksen manifestin display-membereen määritetty.

Määritetty Web App Manifest specissä.
forced-colors

Onko käyttäjäagentti rajoittanut väripalettia.

Lisätty Media Queries Level 5:ssä.
grid Käyttääkö lähtölaitteen tulosäiliö ruudukkoverkkosilmukan vai pisteiden sarjan näytön?
height Näyttökohde (viewport) korkeus.
hover

Onko pääsyöttömekanismi sallinut käyttäjän asettaa hiiren osoittimen elementin päälle?

Lisätty Media Queries Level 4:ssä.
inverted-colors

Onko selain tai alustaväline kääntänyt värejä.

Lisätty Media Queries Level 5:ssä.
light-level

Nykyinen ympäristön valaistustaso.

Lisätty Media Queries Level 5:ssä.
max-aspect-ratio Näyttöalueen leveyden ja korkeuden välisen enimmäisuhteen.
max-color Lähtölaitteen jokaisen värikomponentin enimmäimäärä.
max-color-index Laitteen näyttämä värin enimmäismäärä.
max-height Näyttöalueen enimmäiskorkeus, esimerkiksi selaimen ikkuna.
max-monochrome Monokromaattisessa laitteessa (harmaasävyisessä) jokaisen värin enimmäimäärä.
max-resolution Laitteen enimmäiresoluutio dpi tai dpcm yksikköin.
max-width Näyttöalueen enimmäisleveys, esimerkiksi selaimen ikkuna.
min-aspect-ratio Näyttöalueen leveyden ja korkeuden välisen minimisuhteen.
min-color Lähtölaitteen jokaisen värikomponentin minimimäärä.
min-color-index Laitteen näyttämä värin enimmäismäärä.
min-height Näyttöalueen minimikorkeus, esimerkiksi selaimen ikkuna.
min-monochrome Värin minimimäärä monokromaattisessa laitteessa (esim. harmaasävyisessä).
min-resolution Laitteen vähimmäisresoluutio, käyttäen dpi tai dpcm.
min-width Näyttöalueen vähimmäisleveys, esimerkiksi selaimen ikkuna.
monochrome

Output Device Monochrome Frame Buffer Bit Depth Per Pixel.

Jos laite ei ole mustavalkoinen näyttö, arvo on 0.
orientation Näkymän (viewport) kierto-askel (pystysuuntainen tai horisontaalinen tila).
overflow-block

Miten output Device käsittelee ulosvirtaavan näyttöalueen (viewport) sisällön blokki-akselin suhteen.

Lisätty Media Queries Level 4:ssä.
overflow-inline

Voiko sisäisen inline-akselin ylitetty näyttöalue (viewport) sisältöä pyöriä?

Lisätty Media Queries Level 4:ssä.
pointer

Pääsyötemekanismi onko viittauslaitteisto? Jos on, kuinka tarkka se on?

Lisätty Media Queries Level 4:ssä.
prefers-color-scheme

Tarkistaa, onko käyttäjä suosimassa valkoista tai tummaa värimaailmaa.

Lisätty Media Queries Level 5:ssä.
prefers-contrast

Tarkistaa, onko käyttäjä pyytänyt järjestelmää korottamaan tai alentamaan lähellä olevien värien kontrastia.

Lisätty Media Queries Level 5:ssä.
prefers-reduced-motion

Onko käyttäjä halukas näkemään vähemmän dynaamisia efektejä sivulla.

Lisätty Media Queries Level 5:ssä.
prefers-reduced-transparency

Onko käyttäjä suosimassa alhaisempaa läpinäkyvyyttä.

Lisätty Media Queries Level 5:ssä.
resolution Output Device Resolution, using dpi or dpcm.
scan Output Device Scanning Process (Suited for TVs and others).
scripting

Tarkistaa, onko skriptiä (esim. JavaScript) käytettävissä.

Lisätty Media Queries Level 5:ssä.
update

Output Device Content Rendering Result Update Frequency.

Lisätty Media Queries Level 4:ssä.
width Näkymän (viewport) leveys.

Lisää esimerkkejä

Esimerkki 2

Kun selaimen leveys on 600px tai pienempi, piilota elementti:

@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

kokeile itse

Esimerkki 3

Jos näyttöalueen leveys on 800 pikseliä tai enemmän, aseta taustaväri vaaleanpunaiseksi media-queryn avulla; jos näyttöalueen leveys on 400-799 pikseliä, aseta taustaväri vaaleanvihreäksi media-queryn avulla. Jos näyttöalueen leveys on alle 400 pikseliä, taustaväri on vaaleansininen:

body {
  background-color: vaaleansininen;
}
@media screen and (min-width: 400px) {
  body {
    background-color: lightgreen;
  }
}
@media screen and (min-width: 800px) {
  body {
    background-color: lavender;
  }
}

kokeile itse

Esimerkki 4

Luo vastauskykyinen navigointivalikko (näytetään horisontaalisesti suurilla näytöillä ja vertikaalisesti pienillä näytöillä):

@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

kokeile itse

esimerkki 5

Luo vastauskykyinen sarakkeiden asettelu media-hakemusten avulla:

/* Muuta neljästä sarakkeesta kahteen, kun leveys on 992px tai pienempi */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}
/* Aseta sarakkeet rinnakkain, kun leveys on 600px tai pienempi */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

kokeile itse

esimerkki 6

Luo vastauskykyinen verkkosivusto media-hakemusten avulla:

kokeile itse

esimerkki 7

Media-hakemuksia voidaan käyttää myös sivun asettelun muuttamiseen selaimen suunnan mukaan. Voit kirjoittaa joukon CSS-ominaisuuksia, jotka ovat käytössä vain silloin, kun selaimen ikkunan leveys on suurempi kuin korkeus (eli "vaakuna"-suunta):

Käytä vaaleansinistä taustaväriä, jos suunta on vaakuna-asennossa:

@media only screen and (orientation: landscape) {
  body {
    background-color: vaaleansininen;
  }
}

kokeile itse

esimerkki 8

Aseta tekstinväri media-hakemuksen avulla vihreäksi näytettäessä dokumenttia ja mustaksi tulostettaessa:

@media screen {
  body {
    color: vihreä; 
  }
}
@media print {
  body {
    color: musta; 
  }
}

kokeile itse

esimerkki 9

pilkkueraattu luettelo: Käytä pilkkuja lisätäksesi toisen media-hakemuksen olemassa olevaan media-hakemukseen (sen käyttäytyminen on samanlaista kuin OR-laskin):

/* Muuta <div> ulkoasua, kun leveys on 600px ja 900px välillä tai suurempi kuin 1100px */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid musta;
    background: keltainen;
  }
}

kokeile itse

selaimen tuki

Taulukossa olevat numerot huomioivat täysin tuetun @media-säännön ensimmäisen selaimen version.

Chrome IE / Edge Firefox Safari Opera
21 9 3.5 4.0 9