CSS @media-regler

Definition og brug

@media-regler bruges i medieforespørgsler til at anvende forskellige stilarter til forskellige medietyper/enheder.

Medieforespørgsler kan bruges til at kontrollere mange ting, såsom:

  • Visningsportens bredde og højde
  • Enhedens bredde og højde
  • Retning (er telefonen eller tabletten i liggende eller stående skærmtilstand?)
  • Opløsning

Brug af medieforespørgsler er en populær teknik til at levere tilpassede stilark til stationære computere, bærbare computere, tablets og telefoner (responsivt webdesign).

Du kan også bruge medieforespørgsler til at definere visse stilarter kun til udskriftsdokumenter eller skærmlæsere (mediatype: print, screen eller speech).

Udover medietype er der også medieegenskaber. Medieegenskaber giver mediequerys flere specifikke detaljer ved at tillade test af specifikke egenskaber af brugeragenten eller skærmen. For eksempel kan du kun anvende stilarter på skærme, der er større eller mindre end en bestemt bredde.

Se også:

CSS tutorial:CSS medieforespørgsel

CSS tutorial:CSS mediequery eksempler

RWD tutorial:Opnå responsiv webdesign ved hjælp af mediequerys

JavaScript referencer:window.matchMedia() metoden

Eksempel

Eksempel 1

Hvis browserens vinduesbredde er 600px eller mindre, ændr <body>-elementets baggrundsfarve til 'lysblå':

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

prøv det selv

Du kan finde flere TIY-eksempler nedenfor på siden.

CSS-sprog

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

Betydningen af not, only og and-nøglerne:

not: not-nøglen omvendte hele betydningen af mediequeryen.

only: only-nøglen forhindrer gamle browsere i at anvende de angivne stilarter, som ikke understøtter mediequerys med medieegenskaber. Det har ingen effekt på moderne browsere.

and: and-nøglen kombinerer medieegenskaber med medietype eller andre medieegenskaber.

De er alle valgfri. Men hvis du bruger not eller only, skal du også specificere medietypen.

Du kan også bruge forskellige stilark til forskellige medier, som f.eks.:

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

Medietype

Værdi Beskrivelse
all Standard. Brugt på alle medietype-enheder.
print Brugt til printere.
screen Brugt på computer-skærme, tablets, smartphones osv.
speech Brugt af skærmlæsere til at læse siderne.

Medieegenskaber

Værdi Beskrivelse
any-hover

Er der nogen tilgængelige inputmekanismer, der tillader brugeren (at holde musen osv.) at hænge over elementer?

Tilføjet i Media Queries Level 4.
any-pointer

Er der nogen tilgængelige inputmekanismer med nogen pegeenhed, og hvis ja, hvor præcis er den?

Tilføjet i Media Queries Level 4.
aspect-ratio 视口（viewport）的宽高比。
color

输出设备每个像素的比特值，常见的有 8、16、32 位。

如果设备不支持输出彩色，则该值为 0。
color-gamut

用户代理和输出设备大致程度上支持的色域。

Tilføjet i Media Queries Level 4.
color-index

输出设备的颜色查询表（color lookup table）中的条目数量。

如果设备不使用颜色查询表，则该值为 0。
device-aspect-ratio

输出设备的宽高比。

已在 Media Queries Level 4 中被弃用。
device-height

输出设备渲染表面（如屏幕）的高度。

已在 Media Queries Level 4 中被弃用。
device-width

输出设备渲染表面（如屏幕）的宽度。

已在 Media Queries Level 4 中被弃用。
display-mode

应用程序的显示模式，如 web app 的 manifest 中的 display 成员所指定

在 Web App Manifest spec 被定义。
forced-colors

检测是用户代理否限制调色板。

Tilføjet i Media Queries Level 5.
grid 输出设备使用网格屏幕还是点阵屏幕？
height 视口（viewport）的高度。
hover

主输入机制是否允许用户将鼠标悬停在元素上？

Tilføjet i Media Queries Level 4.
inverted-colors

浏览器或者底层操作系统是否反转了颜色。

Tilføjet i Media Queries Level 5.
light-level

当前环境光水平。

Tilføjet i Media Queries Level 5.
max-aspect-ratio 显示区域的宽度和高度之间的最大比例。
max-color 输出设备每个颜色分量的最大位数。
max-color-index 设备可以显示的最大颜色数。
max-height 显示区域的最大高度，例如浏览器窗口。
max-monochrome 单色（灰度）设备上每种“颜色”的最大位数。
max-resolution 设备的最大分辨率，使用 dpi 或 dpcm。
max-width 显示区域的最大宽度，例如浏览器窗口。
min-aspect-ratio 显示区域的宽度和高度之间的最小比例。
min-color 输出设备每个颜色分量的最小位数。
min-color-index 设备可以显示的最小颜色数。
min-height 显示区域的最小高度，例如浏览器窗口。
min-monochrome 单色（灰度）设备上每种“颜色”的最小位数。
min-resolution Udstyrets laveste opløsning, brug dpi eller dpcm.
min-width Den mindste bredde af visningsområdet, f.eks. browservinduet.
monochrome

Bits per pixel i udstyrets monokrom framebuffer.

Hvis udstyret ikke er sort-hvidt, er værdien 0.
orientation Vinduesretningen (lågt eller højre skærmtilstand).
overflow-block

Hvordan håndterer udstyret indhold, der strømmer ud over blok-aksen (viewport)?

Tilføjet i Media Queries Level 4.
overflow-inline

Kan indhold, der strømmer ud over inline-aksen (viewport), rulles?

Tilføjet i Media Queries Level 4.
pointer

Er det primære inputmekanisme en pegeenhed? Hvis ja, hvordan er dens præcision?

Tilføjet i Media Queries Level 4.
prefers-color-scheme

Detekter, om brugeren foretrækker lyse eller mørke farveskemaer.

Tilføjet i Media Queries Level 5.
prefers-contrast

Detekter, om brugeren har bedt om at øge eller reducere kontrasten mellem nærliggende farver.

Tilføjet i Media Queries Level 5.
prefers-reduced-motion

Har brugeren en præference for færre dynamiske effekter på siden?

Tilføjet i Media Queries Level 5.
prefers-reduced-transparency

Har brugeren en præference for lavere gennemsigtighed?

Tilføjet i Media Queries Level 5.
resolution Udstyrets opløsning, brug dpi eller dpcm.
scan Udstyrets skanningproces (applies til tv osv.).
scripting

Detekter, om skript (f.eks. JavaScript) er tilgængelig.

Tilføjet i Media Queries Level 5.
update

Frekvensen af opdatering af rendering af indholdet af udstyret.

Tilføjet i Media Queries Level 4.
width Vinduesbredden (viewport).

Flere eksempler

Eksempel 2

Skjul elementer, når browserens bredde er 600px eller mindre:

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

prøv det selv

Eksempel 3

Hvis vinduesbredden er 800 pixel eller bredere, brug medieforespørgsel til at sætte baggrundsfarven til lilla; hvis vinduesbredden er mellem 400 og 799 pixel, brug medieforespørgsel til at sætte baggrundsfarven til lysgrøn. Hvis vinduesbredden er mindre end 400 pixel, er baggrundsfarven lysblå:

body {
  background-color: lightblue;
}
@media screen and (min-width: 400px) {
  body {
    background-color: lysgrøn;
  }
}
@media screen and (min-width: 800px) {
  body {
    background-color: lavendel;
  }
}

prøv det selv

Eksempel 4

Opret en responsiv navigationsmenu (vises vandret på store skærme og lodret på små skærme):

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

prøv det selv

Eksempel 5

Brug medieforespørgsler til at oprette en responsiv kolonneopsætning:

/* På skærme med bredde på 992px eller mindre, ændr fra fire kolonner til to kolonner */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}
/* På skærme med bredde mindre end eller lig med 600 pixels, gør kolonnerne stående i stedet for at være ved siden af hinanden */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

prøv det selv

Eksempel 6

Brug medieforespørgsler til at oprette en responsiv hjemmeside:

prøv det selv

Eksempel 7

Medieforespørgsler kan også bruges til at ændre sidens layout baseret på browserens orientering. Du kan skrive et sæt CSS-ejenskaber, der kun gælder, når browservinduets bredde er større end dens højde (dvs. 'liggende' retning).

Brug en lysblå baggrundsfarve, hvis orienteringen er i liggende tilstand:

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

prøv det selv

Eksempel 8

Brug medieforespørgsler til at sætte tekstdybfarve til grøn, når dokumentet vises på skærmen, og sort, når det udskrives:

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

prøv det selv

Eksempel 9

Komma-separeret liste: Brug komma til at tilføje en ny medieforespørgsel til en eksisterende medieforespørgsel (dets adfærd ligner OR-operatoren):

/* Når bredden er mellem 600px og 900px eller større end 1100px - ændr <div>'s udseende */
@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;
  }
}

prøv det selv

browser-understøttelse

Tallene i tabellen angiver den første browserversion, der fuldt ud understøtter @media-reglerne.

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