CSS @media-regel

Definition och användning

@media-regler används i mediaqueries för att tillämpa olika stilar för olika medietyper/enheter.

Mediaqueries kan användas för att kontrollera många saker, som t.ex.:

  • Visningsområdets bredd och höjd
  • Enhets bredd och höjd
  • Riktning (är telefonen eller surfplattan i liggande eller stående läge?)
  • Upplösning

Att använda mediaqueries är en populär teknik för att tillhandahålla anpassade stilarbäddar för datorer, bärbara datorer, surfplattor och telefoner (responsiv webbdesign).

Du kan också använda mediaqueries för att specificera att vissa stilar endast är tillämpliga för utskriftsdokument eller skärmläsare (mediatype: print, screen eller speech).

Förutom mediatyper finns det också mediaegenskaper. Mediaegenskaper ger mer specifika detaljer för mediefrågor genom att tillåta att testa specifika egenskaper hos användaragent eller skärmdisplay. Till exempel kan du applicera stilar endast på skärmar som är större eller mindre än en viss bredd.

Se också:

CSS-tutorial:CSS media queries

CSS-tutorial:CSS mediefrågeexempel

RWD-tutorial:Genom mediefrågor uppnår responsiv webbdesign

JavaScript referenshandbok:window.matchMedia() metod

Exempel

Exempel 1

Om bredden på webbläsarfönstret är 600px eller mindre, ändra bakgrundsfärgen på <body>-elementet till 'ljusblå':

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

prova själv

Du kan hitta fler TIY-exempel längre ner på sidan.

CSS-syntaks

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

Betydelsen av not, only och and-kärnorna:

not: not-kärnet omvänder hela innebörden av mediefrågan.

only: only-kärnet förhindrar att äldre webbläsare tillämpar de specificerade stilmärkena, som inte stöder mediefrågor med mediaegenskaper. Det har ingen inverkan på moderna webbläsare.

and: and-kärnet används för att kombinera mediaegenskaper med mediatyp eller andra mediaegenskaper.

De är valfria. Men om du använder not eller only måste du också specificera mediatypen.

Du kan också använda olika stilmärken för olika medier, såsom här:

<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
....

Mediatyp

Värde Beskrivning
all Standard. Används för alla mediatyper av enheter.
print Används för skrivare.
screen Används för datorskärmar, surfplattor, smartphones och liknande.
speech Används av skärmläsare för att läsa upp sidan.

Mediaegenskaper

Värde Beskrivning
any-hover

Finns det några tillgängliga inmatningsmekanismer som tillåter användaren att hålla musen eller liknande över element?

Lades till i Media Queries Level 4.
any-pointer

Finns det några pekare i tillgängliga inmatningsmekanismer, om ja, hur är noggrannheten?

Lades till i Media Queries Level 4.
aspect-ratio Bredd- och höjdproportionaliteten för viewporten (synfältet).
color

Antalet bitar per pixel på utgångsenheten, vanligtvis 8, 16 eller 32 bitar.

Värdet är 0 om enheten inte stöder färgutmatning.
color-gamut

Den ungefärliga färgdomänen som användaragenten och utgångsenheten stöder.

Lades till i Media Queries Level 4.
color-index

Antalet poster i utgångsenhetens färgsökningstabell (color lookup table).

Värdet är 0 om enheten inte använder en färgsökningstabell.
device-aspect-ratio

Bredd- och höjdproportionaliteten för utgångsenheten.

Föråldrad i Media Queries Level 4.
device-height

Höjden på renderingsytan för utgångsenheten (t.ex. skärmen).

Föråldrad i Media Queries Level 4.
device-width

Bredden på renderingsytan för utgångsenheten (t.ex. skärmen).

Föråldrad i Media Queries Level 4.
display-mode

Visningsmodellen för applikationen, som specificerats av display-medlemmen i web app manifest.

Definierad i Web App Manifest spec.
forced-colors

Om användaragenten begränsar paletten.

Lades till i Media Queries Level 5.
grid Om utgångsenheten använder ett raster eller punktmatris skärm.
height Höjden på viewporten (synfältet).
hover

Om huvudinputmekanismen tillåter användaren att hålla musen över elementet?

Lades till i Media Queries Level 4.
inverted-colors

Om webbläsaren eller den underliggande operativsystemet har omvänt färger.

Lades till i Media Queries Level 5.
light-level

Den aktuella nivån av ljusnivå i omgivningen.

Lades till i Media Queries Level 5.
max-aspect-ratio Den maximala proportionen mellan bredden och höjden på visningsområdet.
max-color Den maximala bitandelen för varje färgkomponent på utgångsenheten.
max-color-index Det maximala antalet färger som enheten kan visa.
max-height Det maximala höjden på visningsområdet, till exempel ett webbläsarfönster.
max-monochrome Det maximala bitantalet för varje 'färg' på monokrom (gråskala) enheter.
max-resolution Den maximala upplösningen för enheten, mätt i dpi eller dpcm.
max-width Det maximala bredden på visningsområdet, till exempel ett webbläsarfönster.
min-aspect-ratio Den minsta proportionen mellan bredden och höjden på visningsområdet.
min-color Den minsta bitandelen för varje färgkomponent på utgångsenheten.
min-color-index Antalet färger som enheten kan visa.
min-height Den minsta höjden på visningsområdet, till exempel en webbläsarfönster.
min-monochrome Varje 'färg' minsta bitantal på monokrom (gråskala) enheter.
min-resolution Enhetens minsta upplösning, använd dpi eller dpcm.
min-width Minsta bredd på visningsområdet, t.ex. browserns fönster.
monochrome

Bitdjupet för varje pixel i enhetens ensamma färgram.

Om enheten inte är en svartvit skärm är värdet 0.
orientation Riktningen som viewporten roterar i (lantläge eller stående läge).
overflow-block

Hur hanterar utdataenheter innehåll som överskrider block-axeln i viewporten.

Lades till i Media Queries Level 4.
overflow-inline

Kan innehåll som överskrider inline-axeln i viewporten rullas?

Lades till i Media Queries Level 4.
pointer

Är den huvudsakliga inmatningsmekanismen en pekinsättning? Om ja, hur är dess noggrannhet?

Lades till i Media Queries Level 4.
prefers-color-scheme

Detektera om användaren föredrar ljus eller mörk färgskala.

Lades till i Media Queries Level 5.
prefers-contrast

Detektera om användaren har begärt att öka eller minska kontrasten mellan närliggande färger.

Lades till i Media Queries Level 5.
prefers-reduced-motion

Vill användaren att det finns färre dynamiska effekter på sidan?

Lades till i Media Queries Level 5.
prefers-reduced-transparency

Använder användaren föredragen lägre genomskinlighet?

Lades till i Media Queries Level 5.
resolution Upplösningen för utdataenheter, använd dpi eller dpcm.
scan Skanningsprocessen för utdataenheter (gäller för TV och liknande).
scripting

Detektera om skript (t.ex. JavaScript) är tillgängligt.

Lades till i Media Queries Level 5.
update

Frekvensen med vilken utdataenheter uppdaterar renderingsresultatet.

Lades till i Media Queries Level 4.
width Bredd på viewport (viewport).

Fler exempel

Exempel 2

Dölj element när browserns bredd är 600px eller mindre:

@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

prova själv

Exempel 3

Om viewportens bredd är 800 pixlar eller bredare, använd mediefrågor för att sätta bakgrundsfärgen till lila; om viewportens bredd är mellan 400 och 799 pixlar, använd mediefrågor för att sätta bakgrundsfärgen till ljusgrön. Om viewporten är mindre än 400 pixlar, är bakgrundsfärgen ljusblå:

body {
  background-color: lightblue;
}
@media screen and (min-width: 400px) {
  body {
    background-color: ljusgrön;
  }
}
@media screen and (min-width: 800px) {
  body {
    background-color: lila;
  }
}

prova själv

Exempel 4

Skapa en responsiv navigationsmeny (visas horisontellt på stora skärmar och vertikalt på små skärmar):

@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

prova själv

exempel 5

Skapa en responsiv kolonnlayout med hjälp av mediafrågor:

/* Byt från fyra kolonner till två kolonner vid 992px eller mindre */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}
/* Plocka ihop kolonnerna i bredder mindre än eller lika med 600 pixlar, istället för att visa dem sida vid sida */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

prova själv

exempel 6

Skapa en responsiv webbplats med hjälp av mediafrågor:

prova själv

exempel 7

Mediafrågor kan också användas för att ändra sidans layout baserat på webbläsarens orientering. Du kan skriva en uppsättning CSS-attribut som endast gäller när fönstrets bredd är större än dess höjd (dvs. 'landscape'-läge).

Använd ljusblå bakgrundsfärg om orienteringen är i landskapsläge:

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

prova själv

exempel 8

Använd mediafrågor för att sätta textfärgen till grön när dokumentet visas på skärmen och svart vid utskrift:

@media screen {
  body {
    color: green; 
  }
}
@media print {
  body {
    color: black; 
  }
}

prova själv

exempel 9

komma-separerad lista: Använd komma för att lägga till en annan mediafråga till en befintlig mediafråga (dess beteende liknar OR-operatorn):

/* När bredden är mellan 600px och 900px eller större än 1100px - ändra utseendet på <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;
  }
}

prova själv

webbläsarstöd

Talen i tabellen anger den första webbläsarversionen som fullständigt stöder @media-regeln.

Chrome IE / Edge Firefox Safari Opera
21 9 3.5 4.0 9