CSS mediální dotazy
CSS2 představil typy médií
Pravidlo @mediazavedené v CSS2 umožnilo definovat různá pravidla stylu pro různé typy médií.
Příklady: Můžete mít jednu sadu pravidel stylu pro obrazovky počítače, jednu pro tiskárny, jednu pro kapesní zařízení, jednu pro zařízení televizního typu a tak dále.
Bohužel tyto typy médií nikdy nezískaly velkou podporu jiných zařízení, než je typ tiskového média.
CSS3 představilo dotazy na média
Mediální dotazy v CSS3 rozšířily myšlenku typů médií CSS2: Místo hledání typu zařízení se zaměřují na schopnosti zařízení.
Mediální dotazy lze použít ke kontrole mnoha věcí, například:
- šířka a výška výřezu
- šířka a výška zařízení
- orientace (je tablet/telefon v režimu na šířku nebo na výšku?)
- rozlišení
Používání dotazů na média je oblíbenou technikou pro poskytování přizpůsobené šablony stylů stolním počítačům, notebookům, tabletům a mobilním telefonům (jako jsou telefony iPhone a Android).
Podpora prohlížeče
Čísla v tabulce určují první verzi prohlížeče, která toto @mediapravidlo plně podporuje.
| Property | |||||
|---|---|---|---|---|---|
| @media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
Syntaxe mediálního dotazu
Mediální dotaz se skládá z typu média a může obsahovat jeden nebo více výrazů, které se vyhodnotí buď jako true, nebo false.
@media not|only mediatype and (expressions) {
CSS-Code;
}
Výsledek dotazu je pravdivý, pokud zadaný typ média odpovídá typu zařízení, na kterém je dokument zobrazen, a všechny výrazy v dotazu na média jsou pravdivé. Když je mediální dotaz pravdivý, použijí se odpovídající šablona stylů nebo pravidla stylu podle normálních kaskádových pravidel.
Pokud nepoužijete operátory ne nebo pouze, je typ média volitelný a
alltyp bude implicitní.
Můžete mít také různé šablony stylů pro různá média:
<link rel="stylesheet" media="mediatype and|not|only (expressions)"
href="print.css">
Typy médií CSS3
| Value | Description |
|---|---|
| all | Used for all media type devices |
| Used for printers | |
| screen | Used for computer screens, tablets, smart-phones etc. |
| speech | Used for screenreaders that "reads" the page out loud |
Jednoduché příklady mediálních dotazů
Jedním ze způsobů, jak používat dotazy na média, je mít přímo v šabloně stylů alternativní sekci CSS.
Následující příklad změní barvu pozadí na světle zelenou, pokud je zobrazovaná oblast široká 480 pixelů nebo širší (pokud je zobrazovaná oblast menší než 480 pixelů, barva pozadí bude růžová):
Příklad
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
Následující příklad ukazuje nabídku, která se bude pohybovat vlevo na stránce, pokud je zobrazovaná oblast široká nebo širší (pokud je zobrazovaná oblast menší než 480 pixelů, nabídka bude nad obsahem):
Příklad
@media screen and (min-width: 480px) {
#leftsidebar
{width: 200px; float: left;}
#main
{margin-left: 216px;}
}
Další příklady dotazů na média
Mnohem více příkladů dotazů na média naleznete na další stránce: Příklady CSS MQ .
CSS @media Reference
Úplný přehled všech typů médií a funkcí/výrazů naleznete v pravidle @media v naší referenci CSS .