@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.

CSS - Previous

Pozicionálás

Next - CSS

Rugalmas dobozok

Last modified 2yr ago

Export as PDF

Copy link

Outline

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

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

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

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

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

További eszköz tulajdonságok