Media query #

A CSS lehetőséget ad számunkra, hogy a böngésző mérete, beállítása vagy környezete alapján az oldalunk másképp jelenjen meg azaz reszponzív legyen.

Az @media lesz az aminek a segítségével meg tudjuk határozni, azt ami alapján változtatni szeretnénk. Ezt követi a környezet megadása, ami lehet:

• screen: Ha kijelzőn tekintjük meg az oldalt
• print: Ha nyomtatni szeretnénk az oldalt
• all: Minden típus egyben

Ezeket elláthatjuk olyan jellzőkkel amelyek szűkítik a körv, vagy negálják. Az alábbiakat a megfelelő típus elé írva tudjuk felhasználni.

• not: Minden kivéve a jelzett típus
• only: Csak és kizárólag a jelzett típus

Mindezek után különböző logikai műveletek segítségével tudjuk tovább pontosítani.

Például, ha szeretnénk mobil eszközre optimailálni az oldalunkat, akkor azt így tehetjük meg:

@media screen and (width <= 480px){
  ...
}

Desktop First #

Mobile First #

Ellenőrző kérdések #

\pagebreak