Media queries jsou klíčovou technikou v kódování a webdesignu (součást kaskádových stylů CSS), která umožňuje přizpůsobit vzhled a rozvržení webové stránky vlastnostem zařízení, na kterém si ji uživatel zrovna prohlíží. Jsou základním stavebním kamenem pro responzivní web design – zajišťují, aby se web správně a čitelně zobrazil na mobilu, tabletu, notebooku i velkém monitoru.
Jak media queries fungují?
Media queries fungují jako sada podmínek. Kód webu se „zeptá“ zařízení na jeho parametry (nejčastěji na šířku obrazovky v pixelech) a podle výsledku aplikuje konkrétní pravidla pro vzhled.
Pokud podmínka platí, vzhled se bleskově upraví. Například:
- Na desktopu: Web zobrazuje vedle sebe tři sloupce textu a velké menu.
- Na mobilu: Media query detekuje šířku obrazovky menší než 768 px, přepne sloupce pod sebe, zmenší písmo a skryje menu do ikonky „hamburgeru“, aby uživatel nemusel text složitě zoomovat.
Výhody media queries pro web a marketing
- Dokonalý uživatelský zážitek (UX): Návštěvník dostane optimální zobrazení bez ohledu na to, zda přichází z iPhonu nebo z kancelářského počítače.
- Klíčový faktor pro SEO: Vyhledávače (v čele s Googlem) upřednostňují weby, které jsou plně responzivní. Správně nastavené media queries přímo ovlivňují pozice ve vyhledávání.
- Vyšší konverzní poměr: Pokud se formuláře nebo nákupní tlačítka na mobilu správně přizpůsobí prstům uživatele, výrazně klesá riziko, ze z webu předčasně odejde.
ZDROJE:
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries
- https://www.w3schools.com/css/css_rwd_mediaqueries.asp
- https://web.dev/articles/responsive-web-design-basics
