Pravidlo @media zavedené 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, jeden pro kapesní zařízení, jeden pro zařízení televizního typu a tak dále.
Bohužel tyto typy médií nikdy neměly velkou podporu ze strany zařízení, jiné než typ tiskového média.
Mediální dotazy v CSS3 rozšířily myšlenku typů médií CSS2: Místo hledání typu zařízení, hledí na schopnost přístroj.
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í mediálních dotazů je oblíbenou technikou pro poskytování přizpůsobeného stylu list na stolní počítače, notebooky, tablety a mobilní telefony (jako jsou telefony iPhone a Android).
Čísla v tabulce určují první verzi prohlížeče, která plně podporuje pravidlo @media.
| Property | |||||
|---|---|---|---|---|---|
| @media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
Mediální dotaz se skládá z typu média a může obsahovat jeden nebo více výrazy, které jsou buď pravdivé nebo nepravdivé.
@media not|only mediatype and (expressions) {
CSS-Code;
}Výsledkem dotazu je true, pokud zadaný typ média odpovídá typu zařízení, kterým dokument je zobrazeno na a všechny výrazy v dotazu na média jsou pravdivé. Když je dotaz na média pravdivý, odpovídá tomu odpovídající šablona stylů nebo pravidla stylu aplikovány podle běžných kaskádových pravidel.
Pokud nepoužijete operátory ne nebo pouze, je typ média volitelný a Bude zahrnut typ všechny.
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">Používá se pro všechna zařízení typu média
Používá se pro tiskárny
Používá se pro obrazovky počítačů, tabletů, chytrých telefonů atd.
Používá se pro čtečky obrazovky, které „čtou“ stránku nahlas
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 výřez je široký 480 pixelů nebo širší (pokud je výřez menší než 480 pixelů, barva pozadí bude růžová):
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}Zkuste to sami →
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: pink;
}
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
<h1>Resize the browser window to see the effect!</h1>
<p>The media query will only apply if the media type is screen and the viewport is 480px wide or wider.</p>
</body>
</html>
Následující příklad ukazuje nabídku, která se bude pohybovat nalevo od stránky if výřez je 480 pixelů široký nebo širší (pokud je výřez menší než 480 pixelů, nabídka bude v horní části obsahu):
@media screen and (min-width: 480px) {
#leftsidebar
{width: 200px; float: left;}
#main
{margin-left: 216px;}
}Zkuste to sami →
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.wrapper {overflow: auto;}
#main {margin-left: 4px;}
#leftsidebar {
float: none;
width: auto;
}
#menulist {
margin: 0;
padding: 0;
}
.menuitem {
background: #CDF0F6;
border: 1px solid #d4d4d4;
border-radius: 4px;
list-style-type: none;
margin: 4px;
padding: 2px;
}
@media screen and (min-width: 480px) {
#leftsidebar {width: 200px; float: left;}
#main {margin-left: 216px;}
}
</style>
</head>
<body>
<div class="wrapper">
<div id="leftsidebar">
<ul id="menulist">
<li class="menuitem">Menu-item 1</li>
<li class="menuitem">Menu-item 2</li>
<li class="menuitem">Menu-item 3</li>
<li class="menuitem">Menu-item 4</li>
<li class="menuitem">Menu-item 5</li>
</ul>
</div>
<div id="main">
<h1>Resize the browser window to see the effect!</h1>
<p>This example shows a menu that will float to the left of the page if the viewport is 480 pixels wide or wider. If the viewport is less than 480 pixels, the menu will be on top of the content.</p>
</div>
</div>
</body>
</html>
Mnohem více příkladů dotazů na média naleznete na další stránce: Příklady CSS MQ.
Úplný přehled všech typů médií a funkcí/výrazů naleznete na @media pravidlo v naší referenci CSS.