CSS

CSS-TYYLEIHIN LIITTYVÄÄ KOULUTUSTA VUONNA 2025!

Kurssit saatavilla kautta Suomen. Tule ja varaa oma koulutustapahtumasi heti! Koulutuksen järjestää asiantuntijasi Koulutus- ja konsultointipalvelu KK Mediat.

CSS:n @media-sääntö ja mediakyselyt(mediaqueryt)

@media-säännön avulla CSS-sääntöjä kohdistetaan esitysvälineelle, kuten näytölle tai tulostukseen.

@media-sääntö alkaa aina @media-avainsanalla, jota seuraa yksi tai useampi mediatyyppi (esim. screen, print) sekä mahdolliset mediakyselyt eli mediaqueryt. Seuraavassa lohkossa määritellään vain kyseiseen mediaan kohdennetut CSS-säännöt.

Alla olevassa esimerkissä näytöllä tapahtuvassa esityksen oletusfontti on isompi kuin tulostetussa versiossa. Lisäksi tulostetussa versiossa hyperlinkit esitetään alleviivattuina. 


@media screen {
  body {font: Verdana 1em; }
  a {text-decoration:none;}
}

@media print {
  body {font: Arial 0.8em; }
  a {text-decoration:underline;}
}

Kaikki modernit selaimet tukevat @media-sääntöjä, mutta eri selainten tuki yksittäisille mediaominaisuuksille voi vaihdella.

Tuetut mediatyypit

Mahdolliset mediatyypin arvot ovat:

CSS:n määrittelemät mediatyypit
Mediatyyppi Kuvaus
all Kaikki mediat (oletusarvo, sama kuin @media attribuuttia ei määritellä)
screen Näyttölaitteet (esim. tietokoneet, mobiililaitteet)
print Paperitulosteet
speech Puhesyntetisaattorit ja muut äänipohjaiset käyttöliittymät.
embossed Tulostus Braille-kirjoittimelle (pistekirjoituksena)
projection Esityslaitteet, kuten projektorit

Osa vanhemmista mediatyypeistä, kuten aural (nykyinen speech) on deprekoitu, ja muut kuten braille, tty, television ja handheld ovat poistumassa.

Mediakyselyt ja responsiivinen web-suunnittelu

@media-sääntöjen todellinen voima tulee esiin mediakyselyjen (mediaqueries) avulla. Mediakyselyjen avulla tyylit kohdennetaan esimerkiksi selainikkunan leveyteen (nk.viewport), näytön kuvasuhteeseen tai käyttäjän järjestelmäasetuksiin. Tämä on keskeinen osa responsiivista web-suunnittelua (RWD), jossa yksi ja sama verkkosivu mukautuu eri päätelaitteille ilman erillisiä mobiili- tai desktop-versioita.

Responsiivinen suunnittelu toteutetaan usein mobile-first-periaatteella. Tällöin tyylit suunnitellaan ensin pienille näytöille ja ne sovitetaan suuremmille näytöille mediakyselyjen avulla: 


/* Perustyyli, pienet laitteet */
body {
  font-size: 1em;
}

/* Kun näytön leveys on vähintään 768px */
@media screen and (min-width: 768px) {
  body {
    font-size: 1.2em;
  }
}

Responsiivisessa web-suunnittelussa käytetään usein seuraavia mediakyselyitä:

OminaisuusEsimerkkiKuvaus
min-width(min-width: 768px)Vähimmäisleveys, jossa tyyli astuu voimaan.
max-width(max-width: 1024px)Enimmäisleveys, jossa tyyli astuu voimaan.
min-height(min-height: 500px)Vähimmäiskorkeus.
max-height(max-height: 900px)Enimmäiskorkeus.
orientation(orientation: portrait)Näytön suunta: portrait tai landscape.
prefers-color-scheme(prefers-color-scheme: dark)Käyttäjän järjestelmäteema: light tai dark.

Mediakyselyt voidaan yhdistää loogisilla operaattoreilla and, or ja not. Operaattorit mahdollistavat tyylien tarkemman kohdistamisen eri käyttötilanteisiin: 


@media not screen { ... }

Breakpointit responsiivisessa web-suunnittelussa

Breakpoint eli katkokohta ohjaa mediakyselyn avulla sivun ulkoasun muutosta eri näyttöleveyksillä, esimerkiksi mobiilista tablettiin tai tietokoneeseen siirryttäessä.

Breakpointeissa hyödynnetään usein min-width- ja max-width-mediakyselyitä. Tällä tavoin tyylejä kohdennetaan eri näyttöleveyksille.

Yleisimmin RWD:ssä käytetyt breakpoint-arvot ovat:

Nämä arvot eivät ole standardoituja, vaan ne perustuvat yleisiin laitemittoihin ja käytännön kokemukseen. Breakpointit kannattaa valita sen mukaan, miten oma sisältö käyttäytyy eri kokoisilla ruuduilla, ei pelkästään laitetilastojen perusteella.


/* Perustyylit jotka kaikki laitteet jakavat. 
*/

/* isommat näytöt (tabletti, desktop): vaaka */
@media screen and (min-width: 768px) and (orientation: landscape) {
  /* ... */
}


/* isommat näytöt (tabletti, desktop): pysty */
@media screen and (min-width: 768px) and (orientation: portrait) {
  /* ... */
}


/* mobiili: pysty */
@media screen and (max-width: 767px) and (orientation: portrait) {
  /* ... */
}

/* mobiili: vaakataso */
@media screen and (max-width: 767px) and (orientation: landscape) {
  /* ... */
}

Meta viewport

Ilman HTML-lähdekoodissa määrättyä meta name="viewport" -elementtiä selain käyttää verkkosivulle oletusleveyttä (yleensä noin 980px). Tämä voi estää sivun oikeanlaisen skaalautumisen ja responsiivisten tyylien toiminnan. Aseta meta viewport seuraavasti HTML-dokumentin head-osioon: 


<meta name="viewport" content="width=device-width, initial-scale=1">

Artikkelin tiedot

Otsikko: CSS:n @media-sääntö ja mediakyselyt(mediaqueryt)

Kuvaus: Opi CSS:n @media-sääntöjen ja mediaqueryjen rooli responsiivisessa web-suunnittelussa, RWD:n yleisimmät breakpointit ja meta viewportin merkitys.

Julkaisija: Koulutus- ja konsultointipalvelu KK Mediat

Viimeksi päivitetty: