Všechny návody

Media Queries

Pokud jste již pronikli do tvorby responzivního webu například pomocí Bootstrapu 3, pak je načase seznámit se s Media Queries. Pomocí nich snadno přizpůsobíte obsah webových stránek tak, aby se vše zobrazovalo správně jak na PC, tabletu nebo mobilu.

Media Queries jsou neodmyslitelnou součástí CSS pro každého vývojáře responzivního webu. Podmiňují určitou vlastnost prvku. Styl se pak projeví podle toho, zda je daná podmínka splněna či nikoli.

Zápis

Media Queries zapisujeme do CSS na konec kódu. Je vhodné označit, že se jedná o úsek s Media Queries, což můžeme provést například takto.

/*------------------------------------*\
  #RESPONSIVE
\*------------------------------------*/

@media (min-width: 1200px) {
  .article--chosen {
    height: 230px;
  }
    }
  • @media uvozuje podmínku, která se zapisuje do závorky
  • v závorce definujeme samotnou podmínku např. (min-size: 450px)
  • podmínek lze definovat více, závorky pak propojíme logickými výrazy jako and, , (or), not
  • do {...} definujeme styly, které mají pro danou podmínku platit
  • Media Queries lze vložit i do HTML kódu <link rel="stylesheet" media="(min-width: 900px)" href="styles.css" />

Příklad

Abyste si vyzkoušeli, jak naše příklady fungují, doporučujeme si je otevřít jako JSFiddle (ikonkou pravo nahoře), zde pak uchopit okraj okna result a pohybovat s ním do stran.

  • u tohoto příkladu jsme nastavili tři zlomové body, v závisloti na kterých se mění styl divu