Mediální dotazy

Mediální dotazy jsou funkcí CSS, která umožňuje obsahu webové stránky přizpůsobit se různým velikostem a rozlišením obrazovky. Jsou základní součástí responzivního webového designu a používají se k přizpůsobení vzhledu webových stránek pro různá zařízení.

Mediální dotazy lze vložit do HTML webové stránky nebo je zahrnout do samostatného souboru .CSS, na který webová stránka odkazuje. Níže je příklad jednoduchého mediálního dotazu:

@media screen and (max-width: 768px)
{
  header { height: 70px; }
  article { font-size: 14px; }
  img { max-width: 480px; }
}

Výše uvedený mediální dotaz se aktivuje, pokud je okno prohlížeče uživatele široké 768 pixelů nebo méně. Může k tomu dojít, když zmenšíte okno na stolním počítači nebo když webovou stránku prohlížíte na mobilním zařízení, například na tabletu.

V responzivním webovém designu fungují mediální dotazy jako filtry pro různé velikosti obrazovky. Stejně jako všechny moduly v kaskádovém stylopisu přepisují ty, které se v seznamu nacházejí níže, ty nad nimi. Proto se výchozí styly obvykle definují v dokumentu CSS jako první a za nimi následují mediální dotazy pro různé velikosti obrazovky. Například styly pro počítače mohou být definovány jako první, za nimi může následovat mediální dotaz se styly pro uživatele tabletů a poté mediální dotaz určený pro uživatele chytrých telefonů. Styly lze také definovat v opačném pořadí, což se považuje za vývoj metodou „mobile first“.

Ačkoli min-width je zdaleka nejčastěji používanou funkcí v mediálních dotazech, k dispozici je i mnoho dalších. Patří mezi ně například min-device-width, min-device-height, aspect-ratio, max-color-index, max-resolution, orientation a resolution. Hodnotu resolution lze například použít k rozpoznání displejů HiDPI, jako jsou Retina displeje, a k načtení grafiky ve vysokém rozlišení namísto standardních obrázků.