> For the complete documentation index, see [llms.txt](https://digikiad.gitbook.io/digitalis-kiadvanyok/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://digikiad.gitbook.io/digitalis-kiadvanyok/css/media.md).

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

![](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-Llv5LnNpMSVR3ODCvbE%2F-Llv5hCEh4Il6d-rULJ7%2Fmedia.png?alt=media\&token=e34e8ae7-ee22-40a7-8fca-defd45fbe153)

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

```css
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ó.

```css
/* 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**

```css
/* 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. 

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

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

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

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