Dotazy na médium

Jedná se  o stavební kámen, který umožňuje upravovat vzhled stránek v závislosti na velikosti zobrazovací plochy. Principem se jedná o podmínky, které umožňují aplikovat CSS pravidla v závislosti na různých technických vlastnostech zařízení.

Dotaz na médium má jednoduchou syntaxi. Po zápisu @media následuje vymezení, pro které se aplikují pravidla v dotazu obsažená. Lze využít dvě části - typ média a jeho vlastnost.  

Výše uvedená podmínka kontrolující šířku, i případné varianty s min/max, se nazývá jako body zlomu, které souvisí přizpůsobováním stránek pro různá zařízení. Často se využívají ke úpravě velikostí, zobrazování elementů, změně písma aj.

Typ média

Výchozí hodnotou typu je all. Jedná se o část dotazu, kterou není nutné uvádět. Je ale nutno brát na zřetel, že pak se budou dotazu na média vyhodnocovat a aplikovat pro všechny typy. 

screen - typ vymezený pro tablety, mobily a PC. 

print - určeno pro tiskárny. Vlastnosti se projevují již v náhledu tisku.

speech - styly je možné upravovat také pro čtečky obrazovky. 

Logické operátory 

Současně je možné podmínky vlastností kombinovat pomocí logických operátorů současně (and), negace (not) a nebo (,). 

Dotazy na vlastnosti média

Důležitější a více viditelnější částí @media je dotaz na vlastnost zařízení. Nejvíce používanější vlastností jsou varianty width, max-width a min-width, s jejichž aplikací lze obsah webu upravovat přímo podle velkosti zobrazovací plochy zařízení. Tyto breakpointy se dělí na: 

X < 767px: zařízení považovaná za extrémně malá.

767px < X < 991px: malá zařízení.

991px < X < 1199px: středně velká zařízení, např. tablet.

1199px < X: velká zařízení.

Přibližně stejné hodnoty jsou použité ve frameworcích Bootstrap a W3.CSS. Rozdíly se tam ale najdou. :)

Pozor! I v případě těchto pravidel platí přepisování pravidel, tudíž záleží na pořadí zápisů jednotlivých dotazů na média. Pořadí je závislé na tom, jakou vlastnost využijete a pro jaké zařízení jsou CSS primárně určeny.

Další případně vhodnou vlastností pro @media je orientace zařízení. Vlastnost orientation může nabývat hodnoty landscape a portrait.