CSS/Mediakysely

CSS:n mediakyselyillä (engl. media query) voi CSS-sääntöjä kohdentaa käyttäjän laitteen ominaisuuksien mukaan. Tällä tavalla voidaan esimerkiksi käyttää eri asettelua erikokoisille päätelaitteille.

Mediakyselyillä voi, paitsi selvittää käyttäjän laitteen koon, myös tiedustella esimerkiksi voiko osoitinta pitää objektin päällä (esimerkiksi työkaluvihjeen näyttämiseksi).

Mediakysely aloitetaan @media-merkinnällä sen jälkeen annetaan mediatyypit ja ominaisuudet, joiden toteutuessa lohkon koodi on voimassa. Mediatyyppejä ja ominaisuuksia voi yhdistellä loogisilla operaattoreilla.

Mediatyypit

Esimerkiksi alla olevaia tyylejä käytettäisiin vain tulosteille.

Mediakyselyissä käytettävät mediatyypit

screen	näytölliset laitteet, kuten pöytäkoneet, tabletit ja älypuhelimet
print	tuloste
all	kaikki laitteet

Aiemmin on ollut käytössä myös muita, mutta ne ovat nykyään vanhentuneita.

@media print {
    /* tulosteille käytettäviä tyylejä */
}

Ominaisuuksia voi erotella loogisilla operaattoreilla and, , (pilkku), not ja only.

Mediakyselyissä käytettävät loogiset operaattorit

and	looginen ja-operaattori
,	operaattorilla voi luetella useita kyselyitä, joilla on sama lohko; looginen tai-operaattori
not	looginen ei-operaattori
only

Kohdentaminen näytön koon mukaan

Ominaisuuksilla min-width ja max-width voidaan koodi sisällyttää vain tietyn kokoisille laitteille. Min-width täsmää vain, kun laite on vähintään annetun levyinen, max-width, kun se on korkeintaan annetun levyinen.

@media (max-width: 799px) {
    /* Korkeintaan 799 pikseliä leveitä laitteita koskeva koodi. */
}

@media (min-width: 800px) and (max-width: 1099px) {
    /* Korkeintaan 800–1099 pikseliä leveitä laitteita koskeva koodi. */
}

@media (min-width: 1100px) {
    /* Yli 1100 pikseliä leveitä laitteita koskeva koodi. */
}

Esimerkki

Esimerksiksi gridin asettelua voidaan muuttaa laitteen koon mukaan.

• 
  Pienellä näytöllä asetteluelementit näytetään päällekkäin
• 
  Keskikokoisella näytöllä sivusisältö näytetään pääsisällön vieressä
• 
  Suurella näytöllä navigaatio ja sivusisältö näytetään sivupalkeissa

body {
    display: grid;
    gap: 1ch;
    padding: 0.5ch;
}

@media (max-width: 640px) {
    body {
        grid-template-areas:
            "header"
            "navigation"
            "main-content"
            "aside-content"
            "footer";
        grid-template-columns: 1fr;
    }
}

@media (min-width: 641px) and (max-width: 1007px) {
    body {
        grid-template-areas:
            "header header"
            "navigation aside-content"
            "main-content aside-content"
            "footer footer";
        grid-template-columns: 2fr 1fr;
    }
}

@media (min-width: 1008px) {
    body {
        grid-template-areas:
            "header header header"
            "navigation main-content aside-content"
            "navigation main-content aside-content"
            "footer footer footer";
        grid-template-columns: 1fr 2fr 1fr;
    }
}