A CSS2-ben bevezetett @media szabály lehetővé tette különböző stílusszabályok meghatározását a különböző médiatípusokhoz.
Példák: Lehetne egy stílusszabálykészlet a számítógép képernyőihez, egy pedig a számítógép képernyőihez nyomtatók, egy a kézi eszközökhöz, egy a televízió típusú eszközökhöz és így tovább.
Sajnos ezek a médiatípusok soha nem kaptak nagy támogatást az eszközök, egyéb eszközök által mint a nyomathordozó típusa.
A CSS3 médialekérdezései kiterjesztették a CSS2 médiatípusok ötletét: Ahelyett, hogy egy eszköztípust keresne, megvizsgálják a képességét eszköz.
A médialekérdezések számos dolog ellenőrzésére használhatók, például:
a nézetablak szélessége és magassága
a készülék szélessége és magassága
tájolás (a táblagép/telefon fekvő vagy álló módban van?)
felbontás
A médialekérdezések használata népszerű technika a személyre szabott stílus megjelenítésére lapot asztali számítógépekre, laptopokra, táblagépekre és mobiltelefonokra (például iPhone és Android telefonokra).
A táblázatban szereplő számok az első böngészőverziót jelzik, amely teljes mértékben támogatja a @media szabályt.
| Property | |||||
|---|---|---|---|---|---|
| @media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
A médialekérdezés médiatípusból áll, és tartalmazhat egyet vagy többet kifejezések, amelyek igaz vagy hamisak lesznek.
@media not|only mediatype and (expressions) {
CSS-Code;
}A lekérdezés eredménye az igaz, ha a megadott adathordozó típus megegyezik a dokumentum eszköztípusával megjelennek, és a médialekérdezésben szereplő összes kifejezés igaz. Ha egy médialekérdezés igaz, akkor a megfelelő stíluslap vagy stílusszabályok igazak alkalmazzák, követve a normál lépcsőzetes szabályokat.
Hacsak nem használja a nem vagy csak operátorokat, a médiatípus nem kötelező, és a Az minden típus beleértendő.
Különféle stíluslapok is lehetnek a különböző médiákhoz:
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">Minden médiatípushoz használható
Nyomtatókhoz használatos
Számítógép-képernyőkhöz, táblagépekhez, okostelefonokhoz stb.
Olyan képernyőolvasókhoz használják, amelyek hangosan "olvasják" az oldalt
A médialekérdezések használatának egyik módja egy alternatív CSS-szakasz közvetlenül a stíluslapon belül.
A következő példa a háttérszínt világoszöldre változtatja, ha a a nézetablak 480 képpont széles vagy szélesebb (ha a nézet kisebb, mint 480 pixel, a háttérszín rózsaszín lesz):
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}Próbálja ki Ön is →
<!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>
A következő példa egy menüt mutat be, amely az oldal bal oldalán lebeg, ha a nézetablak 480 pixel széles vagy szélesebb (ha a nézet kisebb, mint 480 pixel, a menü a tartalom tetején lesz):
@media screen and (min-width: 480px) {
#leftsidebar
{width: 200px; float: left;}
#main
{margin-left: 216px;}
}Próbálja ki Ön is →
<!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>
A médialekérdezésekre vonatkozó további példákért látogasson el a következő oldalra: CSS MQ példák.
Az összes médiatípus és szolgáltatás/kifejezés teljes áttekintéséhez, kérjük, tekintse meg a @médiaszabály a CSS-referenciánkban.