CSS media queries

#1 Co jsou media queries

Media queries jsou speciální funkce, které pomáhají v tvoření respozivního designu. Dokáží rozlišovat šířku či výšku zařízení, stránky, orientaci zařízení a podobně, aby tomu mohly přizpůsobit styly.

Historie

Media queries vznikla již v druhé verzi CSS, kdy byla založena na typu zařízení – měnily styly podle toho, zda byla stránka otevřena na mobilním telefonu nebo na velkém monitoru či notebooku.

S příchodem CSS3 byly aktualizovány také funkce media queries, které se nově neorientují podle typu zařízení, ale podle velikosti stránky (šířky či výšky), velikosti zařízení, orientace obrazovky (na výšku nebo na šířku) a také podle rozlišení obrazovky.

#2 Syntaxe

Media queries se zapisují pomocí hlavní funkce @media, po které následují klíčová slova. „Výstupem“ (i když media queries nemají fyzický výstup) je pravda či nepravda, podle toho zda podmínka / podmínky platí – pokud ano, dokument se začne stylovat pomocí vlastností vně media queries; pokud je výstup nepravda, nic se nestane.

Skladba

@media screen and (max-width: 750px) {

 /* Styly */

}

Příklad výše se skládá ze čtyř částí – funkce @media, definující media queries, klíčové slovo screen, které definuje, že se bude media queries ohlížet na zařízení s obrazovkami, spojovací výraz and a argument (max-width: 750px), který říká, že se styly aplikují, pokud je šířka obrazovky menší než 750 px.

Klíčová slova mohou být tato:

Po klíčových slovech, doplněných o spojku and, se nachází argumenty. Ty definují podmínku, na kterou se media queries ohlížejí. Nejčastěji se jedná o podmínky vlastností max-width, min-width, max-height a min-height, které rozlišují podle velikosti šířky či výšky zařízení.

#3 Příklad

V následujícím příkladu se nachází prvek #obal, kterému je definován flexbox. Pokud je obrazovka menší než 500 pixelů, je mu změněna barva pozadí a také tok vnořených prvků.

#obal {

 display: flex;

 background-color: blue;

 padding: 30px;

 flex-direction: row-reverse;

}

@media screen and (max-width: 500px) {

 #obal {

  background-color: green;

  flex-direction: column-reverse;

 }

}

Na první pohled se může zdá, že vlastnosti padding a display nebudou použity, pokud je obrazovka menší než 500 pixelů na šířku, protože nejsou zapsány v media queries, ale jelikož se jedná o kaskádové styly, vlastnosti se dědí.