Čo je media query a aký má význam v responzívnom dizajne?

Media query je CSS technika, ktorá umožňuje nastavovať štýly podľa typu zariadenia, rozlíšenia obrazovky, orientácie či ďalších parametrov. Kľúčová je pre responzívny dizajn, kde je potrebné prispôsobiť vzhľad stránky rôznym zariadeniam.

Výhody media query

Jednoduché prispôsobenie rozloženia, veľkosti písma alebo obrázkov pre mobily, tablety alebo monitory. Zlepšuje použiteľnosť a zážitok používateľa na všetkých zariadeniach.

Príklady z praxe

Použitím

@media (max-width: 600px) { ... } sa napríklad zmení rozloženie menu na mobiloch, kým na počítači zostáva pôvodný stav.