@media

A @media direktíva a megjelenítő eszköz típusa, és tulajdonságai alapján léptet életbe CSS szabályokat.

Segítségével eltérő kinézetet valósíthatunk meg eltérő képernyőfelbontásokon, vagy eszközökön.

Megjelenítő eszköz típusa (media types)

A közvetlenül a @media kulcsszó után kell megadni. Lehetséges értékei:

• all - minden típus

• print - nyomtatás

• screen - kijelző

• speech - felolvasóprogram

Nem kötelező megadni, ebben az esetben az alapértéket, az all-t veszi fel.

p {
    color: red;
}

@media print {
    p {
        color: black;
    }
}

A fenti példában a bekezdések színe képernyőn vörös, kinyomtatva viszont fekete színű lesz.

Megjelenítő eszköz tulajdonsága (media features)

Megjelenítő eszköz szélesség alapján

Mobil eszközök esetén ez a megjelenítő eszköz szélessége, asztali böngésző esetén a böngésző ablaka mérvadó.

/* Pontos szélesség */
@media (width: 600px) {
    ...
}

/* Legkisebb szélesség */
@media (min-width: 601px) {
    ...
}

/* Legnagyobb szélesség */
@media (max-width: 599px) {
    ...
}

Megjelenítő eszköz magasság alapján

/* Pontos magasság */
@media (height: 600px) {
    ...
}

/* Legkisebb magasság */
@media (min-height: 601px) {
    ...
}

/* Legnagyobb magasság */
@media (max-height: 599px) {
    ...
}

Megjelenítő eszköz orientációja alapján

...

További eszköz tulajdonságok

Reszponziv webalkalmazások építéséhez az eddig felsorolt eszköz tulajdonságok bő eszközkészletet biztosítanak, de rajtuk kívül még további tulajdonságok is elérhetőek. További példák:

• aspect-ratio - képernyő arány

• resolution - pixel sűrűség (retina)

• color - megjelenítő eszköz színei

• monochrome - monokróm e a kijelző

• pointer - pozicionáló eszköz típusa (egér)

Logikai operátorok

not (nem)

A not operátorral megfordíthatunk egy @media direktívát.

@media not print {
    ...
}

Ebben a példában minden eszköz típusra, ami nem print érvényes CSS szabály.

and (és)

Az and operátorral összekapcsolhatjuk az eszköztípusokat és jellemzőket, így több szabálynak kell megfelelnie az adott eszközön, hogy érvénybe lépjen a @media-ba foglalt CSS.

@media screen and (min-width: 800px) {
    ...
}

A fenti példában média típust, és média tulajdonságot is megadtunk.

, (vagy)

A , operátorral több eszköz szabályt is megadhatunk, ha egy közülük érvényes, a @media direktívában lévő CSS szabály(-ok) érvénybe lépnek.

@media (max-width: 100px), (min-width: 200px) {
    ...
}

Ebben a példában 100px alatt és 200px felett is érvényesül a CSS.