CSS Media Queries


Innehållsförteckning

    Visa innehållsförteckning


CSS2 introducerade mediatyper

Regeln @media, introducerad i CSS2, gjorde det möjligt att definiera olika stilregler för olika mediatyper.

Exempel: Du kan ha en uppsättning stilregler för datorskärmar, en för skrivare, en för handhållna enheter, en för enheter av TV-typ och så vidare.

Tyvärr fick dessa mediatyper aldrig mycket stöd av enheter, andra än utskriftsmedietypen.


CSS3 introducerade mediafrågor

Mediefrågor i CSS3 utökade idén om CSS2-medietyper: Istället för att leta efter en typ av enhet, de tittar på förmågan hos enhet.

Mediefrågor kan användas för att kontrollera många saker, till exempel:

  • bredd och höjd på visningsporten

  • enhetens bredd och höjd

  • orientering (är surfplattan/telefonen i liggande eller stående läge?)

  • upplösning

Att använda mediefrågor är en populär teknik för att leverera en skräddarsydd stil ark till stationära datorer, bärbara datorer, surfplattor och mobiltelefoner (som iPhone och Android-telefoner).


Webbläsarstöd

Siffrorna i tabellen anger den första webbläsarversionen som fullt ut stöder regeln @media.

Property
@media 21.0 9.0 3.5 4.0 9.0

Media Query Syntax

En mediefråga består av en mediatyp och kan innehålla en eller flera uttryck, som löser sig till antingen sant eller falskt.

@media not|only mediatype and  (expressions) {
  CSS-Code;
}

Resultatet av frågan är sant om den angivna mediatypen matchar den typ av enhet som dokumentet är visas på och alla uttryck i mediefrågan är sanna. När en mediefråga är sann är motsvarande stilmall eller stilregler tillämpas, enligt de normala kaskadreglerna.

Om du inte använder operatörerna inte eller bara är mediatypen valfri och all typ kommer att antydas.

Du kan också ha olika stilmallar för olika media:

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">


CSS3 mediatyper

all

Används för alla mediatyper

print

Används för skrivare

screen

Används för datorskärmar, surfplattor, smartphones etc.

speech

Används för skärmläsare som "läser" sidan högt


Mediafrågor Enkla exempel

Ett sätt att använda mediefrågor är att ha en alternativ CSS-sektion direkt i din stilmall.

Följande exempel ändrar bakgrundsfärgen till ljusgrön om visningsporten är 480 pixlar bred eller bredare (om visningsporten är mindre än 480 pixlar, bakgrundsfärgen blir rosa):

Exempel

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

Prova själv →

<!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öljande exempel visar en meny som kommer att flyta till vänster på sidan om visningsporten är 480 pixlar bred eller bredare (om visningsporten är mindre än 480 pixlar, menyn kommer att ligga överst på innehållet):

Exempel

@media screen and (min-width: 480px) {
  #leftsidebar 
{width: 200px; float: left;}
  #main 
{margin-left: 216px;}
}

Prova själv →

<!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>


Fler exempel på mediafrågor

För mycket fler exempel på mediefrågor, gå till nästa sida: CSS MQ Exempel.


CSS @media Referens

För en fullständig översikt över alla mediatyper och funktioner/uttryck, vänligen titta på @media-regeln i vår CSS-referens.