Media Queries přinášejí zajímavou a v budoucnu nepochybně četně využívanou možnost dělit interprety nikoliv už jen podle typu, ale i podle jejich dispozic, např. orientace (tj. zda je papír či displej orientovaný na šířku, nebo na výšku), počtu barev a dalších parametrů. Díky tomu bude možné naservírovat každému zařízení spolu s HTML kódem styl šitý takříkajíc přímo na míru.
Předvedeme si to právě teď a právě tady. Na nadpisu. Jeho barva indikuje šířku okna prohlížeče. Pokud daný prohlížeč MQ špatně podporuje nebo šířka okna je menší než 500px, musí být nadpis červený. Je-li šířka okna mezi 500 a 860 pixely, bude nadpis modrý. Jinak bude tmavě modrý (860 - 1200 pixelů) nebo hnědý (1200 - 1500 pixelů).
Nešťastníci, kteří používají zastaralé prohlížeče, budou od MQ potrestaní tím, že se jim nadpis vůbec nezobrazí. Dobře jim tak! Nemají brzdit!
CSS kód na vysvětlenou:
@media all {h1 {visibility: hidden}}
@media only all {h1 {visibility: visible; color: red}}
@media all and (min-width : 500px) {h1 {color: blue}}
@media all and (min-width : 860px) {h1 {color: navy}}
@media all and (min-width : 1200px) {h1 {color: brown}}
@media all and (min-width : 1500px) {h1 {color: orange}}