CSS3 Media Queries

Podmínky, které aplikují vnořenou část CSS pravidel na zařízení podle parametrů výstupu

Poznámka: Šířka boxů vyznačuje podíl prohlížeče na návštěvnosti českých webů podle Rankings.cz z června 2012.

IE8 a starší prohlížeče nezvládají media queries dotazující se na rozměry (např. max-width: 480px). Můžete je zapnout pomocí polyfillu Respond.js. Jen bacha, respond.js musí být v hlavičce dokumentu první javascript hned za CSS soubory.

Základní syntaxe podle W3C bez prefixových variant

@media (_podminky_) {
  // css kod
}

Podmínku můžete vložit do CSS souboru nebo už k odkazu na něj:
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 480px)">
Logické operátory:
- and – viz předchozí příklad.
- not – pro negaci například @media not projection and (max-width: 1200px)
- only – schová pravidla vložená v media query před prohlížeči co neumí CSS3 — @media only screen { … }
Nejobvyklejší podmínky:
- @media print { … }
  — tiskové styly
- @media only screen and (max-device-width : 480px) { … }
  — dotaz na šířku vieportu – používá se k detekci typu zařízení
- @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { … }
  — zařízení s Retina displeyem jako iPhone4

Zmenšete velikost okna prohlížeče. Tenhle boxík pod šířkou 940px změní barvu pozadí.

@media (max-width: 940px) {

  #mq-example {
    background: #ccc;
  }

}

Media queries jsou jedním ze tří pilířů responsive webdesignu. Ukázky líbivých (ale ne vždy dokonale vymyšlených) responsive řešení jsou na Mediaqueri.es.
Vyčerpávající úvod do media queries je na Zdrojáku.