Reglen @media, introduceret i CSS2, gjorde det muligt at definere forskellige stilregler for forskellige medietyper.
Eksempler: Du kunne have ét sæt stilregler for computerskærme, én for printere, en til håndholdte enheder, en til tv-enheder og så videre.
Desværre fik disse medietyper aldrig megen støtte fra andre enheder end udskriftsmedietypen.
Medieforespørgsler i CSS3 udvidede ideen til CSS2-medietyper: I stedet for at lede efter en type enhed, de ser på evnen til enhed.
Medieforespørgsler kan bruges til at kontrollere mange ting, såsom:
visningsportens bredde og højde
enhedens bredde og højde
retning (er tabletten/telefonen i liggende eller stående tilstand?)
løsning
Brug af medieforespørgsler er en populær teknik til at levere en skræddersyet stil ark til stationære computere, bærbare computere, tablets og mobiltelefoner (såsom iPhone- og Android-telefoner).
Tallene i tabellen angiver den første browserversion, der fuldt ud understøtter reglen @media.
| Property | |||||
|---|---|---|---|---|---|
| @media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
En medieforespørgsel består af en medietype og kan indeholde en eller flere udtryk, som enten er sande eller falske.
@media not|only mediatype and (expressions) {
CSS-Code;
}Resultatet af forespørgslen er sand, hvis den angivne medietype matcher den type enhed, dokumentet er bliver vist på, og alle udtryk i medieforespørgslen er sande. Når en medieforespørgsel er sand, er det tilsvarende typografiark eller stilregler anvendes efter de normale kaskaderegler.
Medmindre du bruger ikke- eller kun-operatørerne, er medietypen valgfri og alle-typen vil være underforstået.
Du kan også have forskellige stylesheets til forskellige medier:
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">Anvendes til alle medietypeenheder
Bruges til printere
Bruges til computerskærme, tablets, smartphones mv.
Bruges til skærmlæsere, der "læser" siden højt
En måde at bruge medieforespørgsler på er at have en alternativ CSS-sektion lige inde i dit typografiark.
Følgende eksempel ændrer baggrundsfarven til lysegrøn, hvis viewporten er 480 pixels bred eller bredere (hvis viewporten er mindre end 480 pixels, baggrundsfarven vil være pink):
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}Prøv det selv →
<!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>
Følgende eksempel viser en menu, der vil flyde til venstre på siden, hvis viewporten er 480 pixels bred eller bredere (hvis viewporten er mindre end 480 pixels, menuen vil være oven på indholdet):
@media screen and (min-width: 480px) {
#leftsidebar
{width: 200px; float: left;}
#main
{margin-left: 216px;}
}Prøv det selv →
<!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>
For meget flere eksempler på medieforespørgsler, gå til næste side: CSS MQ-eksempler.
For en fuld oversigt over alle medietyper og funktioner/udtryk, se venligst @media-reglen i vores CSS-reference.