Média dotazy

Mediální dotazy jsou součástí CSS to umožňuje webové stránky obsah přizpůsobit různým velikostem a rozlišením obrazovky. Jsou základní součástí responzivní webdesign a slouží k přizpůsobení vzhledu webových stránek pro více zařízení.

Na webovou stránku lze vložit dotazy na média HTML nebo zahrnuty v samostatném .CSS soubor odkazovaný webovou stránkou. Níže je uveden příklad jednoduchého mediálního dotazu:

@media obrazovka a (max. šířka: 768px)
{
záhlaví {výška: 70px; }
článek {font-size: 14px; }
obrázek {max-width: 480px; }
}

Mediální dotaz výše se aktivuje, pokud má uživatel prohlížeč okno je 768 pixelů široký nebo méně. K tomu může dojít, pokud zmenšíte okno na stolním počítači nebo pokud používáte mobilní zařízení, například tableta, pro zobrazení webové stránky.

V responzivním webovém designu fungují dotazy na média jako filtry pro různé velikosti obrazovek. Stejně jako všechny moduly v kaskádové šabloně stylů, i ty, které se objevují dále v seznamu, mají přednost před těmi nad nimi. Proto standardní styly jsou obvykle definovány nejprve v dokumentu CSS, poté následují mediální dotazy pro různé velikosti obrazovek. Například nejdříve mohou být definovány styly plochy, poté mediální dotaz se styly pro uživatele tabletů, poté mediální dotaz určený pro smartphone uživatelů. Styly mohou být také definovány v opačném pořadí, což je považováno za vývoj „mobile first“.

Zatímco min šířkou je zdaleka nejběžnější funkcí používanou v mediálních dotazech, k dispozici je také mnoho dalších. Mezi příklady patří min. šířka zařízení, minimální výška zařízení, poměr stran, max-color-index, maximální rozlišení, orientace, a řešení, řešení hodnota může být například použita k detekci HiDPI displejů (např displeje sítnice) a místo standardních obrázků načtěte grafiku ve vysokém rozlišení.