Pravidlo CSS @media
Příklad
Změňte barvu pozadí prvku <body> na „světle modrou“, když je okno prohlížeče široké 600 pixelů nebo méně:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Další příklady „Vyzkoušejte si to sami“ níže.
Definice a použití
Pravidlo @media
se používá v dotazech na média k použití různých stylů pro různé typy médií/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ů (responzivní webový design) na stolní počítače, notebooky, tablety a mobilní telefony.
Můžete také použít dotazy na média k určení, že určité styly jsou pouze pro tištěné dokumenty nebo pro čtečky obrazovky (typ média: tisk, obrazovka nebo řeč).
Kromě typů médií existují také funkce médií. Funkce médií poskytují konkrétnější podrobnosti k dotazům na média tím, že umožňují testovat konkrétní funkci uživatelského agenta nebo zobrazovacího zařízení. Styly můžete například použít pouze na ty obrazovky, které jsou větší nebo menší než určitá šířka.
Podpora prohlížeče
Čísla v tabulce určují první verzi prohlížeče, která plně podporuje pravidlo @media.
Property | |||||
---|---|---|---|---|---|
@media | 21 | 9 | 3.5 | 4.0 | 9 |
Syntaxe CSS
@media not|only mediatype and (mediafeature and|or|not
mediafeature) {
CSS-Code;
}
význam klíčových slov not , only and a :
not: Klíčové slovo not převrací význam celého mediálního dotazu.
pouze: Klíčové slovo Only zabraňuje starším prohlížečům, které nepodporují dotazy na média s funkcemi médií, použít zadané styly. Na moderní prohlížeče to nemá žádný vliv.
a: Klíčové slovo and kombinuje funkci média s typem média nebo jinými funkcemi média.
Všechny jsou volitelné. Pokud však používáte ne nebo pouze , musíte také zadat typ média.
Můžete také mít různé šablony stylů pro různá média, například takto:
<link rel="stylesheet" media="screen and (min-width:
900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width:
600px)" href="smallscreen.css">
....
Typy médií
Value | Description |
---|---|
all | Default. 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 |
Funkce médií
Value | Description |
---|---|
any-hover | Does any available input mechanism allow the user to hover over elements? (added in Media Queries Level 4) |
any-pointer | Is any available input mechanism a pointing device, and if so, how accurate is it? (added in Media Queries Level 4) |
aspect-ratio | The ratio between the width and the height of the viewport |
color | The number of bits per color component for the output device |
color-gamut | The approximate range of colors that are supported by the user agent and output device (added in Media Queries Level 4) |
color-index | The number of colors the device can display |
grid | Whether the device is a grid or bitmap |
height | The viewport height |
hover | Does the primary input mechanism allow the user to hover over elements? (added in Media Queries Level 4) |
inverted-colors | Is the browser or underlying OS inverting colors? (added in Media Queries Level 4) |
light-level | Current ambient light level (added in Media Queries Level 4) |
max-aspect-ratio | The maximum ratio between the width and the height of the display area |
max-color | The maximum number of bits per color component for the output device |
max-color-index | The maximum number of colors the device can display |
max-height | The maximum height of the display area, such as a browser window |
max-monochrome | The maximum number of bits per "color" on a monochrome (greyscale) device |
max-resolution | The maximum resolution of the device, using dpi or dpcm |
max-width | The maximum width of the display area, such as a browser window |
min-aspect-ratio | The minimum ratio between the width and the height of the display area |
min-color | The minimum number of bits per color component for the output device |
min-color-index | The minimum number of colors the device can display |
min-height | The minimum height of the display area, such as a browser window |
min-monochrome | The minimum number of bits per "color" on a monochrome (greyscale) device |
min-resolution | The minimum resolution of the device, using dpi or dpcm |
min-width | The minimum width of the display area, such as a browser window |
monochrome | The number of bits per "color" on a monochrome (greyscale) device |
orientation | The orientation of the viewport (landscape or portrait mode) |
overflow-block | How does the output device handle content that overflows the viewport along the block axis (added in Media Queries Level 4) |
overflow-inline | Can content that overflows the viewport along the inline axis be scrolled (added in Media Queries Level 4) |
pointer | Is the primary input mechanism a pointing device, and if so, how accurate is it? (added in Media Queries Level 4) |
resolution | The resolution of the output device, using dpi or dpcm |
scan | The scanning process of the output device |
scripting | Is scripting (e.g. JavaScript) available? (added in Media Queries Level 4) |
update | How quickly can the output device modify the appearance of the content (added in Media Queries Level 4) |
width | The viewport width |
Další příklady
Příklad
Skrýt prvek, když je šířka prohlížeče 600 pixelů nebo méně:
@media screen and (max-width: 600px) {
div.example {
display:
none;
}
}
Příklad
Pomocí mediaqueries nastavte barvu pozadí na levandulovou, je-li zobrazovaná oblast široká 800 pixelů nebo širší, na světle zelenou, pokud je zobrazovaná oblast široká 400 až 799 pixelů. Pokud je zobrazovaná oblast menší než 400 pixelů, barva pozadí je světle modrá:
body {
background-color: lightblue;
}
@media screen and (min-width:
400px) {
body {
background-color: lightgreen;
}
}
@media
screen and (min-width: 800px) {
body {
background-color: lavender;
}
}
Příklad
Vytvořte responzivní navigační nabídku (zobrazenou vodorovně na velkých obrazovkách a svisle na malých obrazovkách):
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}
Příklad
Pomocí dotazů na média vytvořte responzivní rozvržení sloupců:
/* On screens that are 992px wide or less, go from four columns to two
columns */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* On screens that are 600px wide or less, make the columns stack
on top of each other instead of next to each other */
@media screen and (max-width:
600px) {
.column {
width: 100%;
}
}
Příklad
Použijte mediální dotazy k vytvoření responzivního webu:
Příklad
Mediální dotazy lze také použít ke změně rozvržení stránky v závislosti na orientaci prohlížeče. Můžete mít sadu vlastností CSS, které se použijí pouze tehdy, když je okno prohlížeče širší než jeho výška, tzv. orientace na šířku.
Pokud je orientace v režimu na šířku, použijte světle modrou barvu pozadí:
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
}
Příklad
Pomocí mediaqueries nastavte barvu textu na zelenou, když je dokument zobrazen na obrazovce, a na černou, když je vytištěn:
@media screen {
body {
color: green;
}
}
@media print {
body {
color: black;
}
}
Příklad
Seznam oddělený čárkami : přidejte další mediální dotaz k již existujícímu pomocí čárky (bude se chovat jako operátor OR):
/* When the width is between 600px and 900px OR above 1100px - change the
appearance of <div> */
@media screen and (max-width: 900px) and
(min-width: 600px), (min-width: 1100px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
Související stránky
CSS kurz: CSS Media Queries
Kurz CSS: Příklady mediálních dotazů CSS
Výukový program RWD: Responzivní webový design s mediálními dotazy
Výukový program JavaScript: Metoda window.matchMedia().