CSS @media-regel

Definitie en gebruik

@media-regels worden in media queries gebruikt om verschillende media types/apparaten verschillende stijlen toe te passen.

Media queries kunnen worden gebruikt om veel verschillende dingen te controleren, zoals:

  • Breedte en hoogte van het viewport
  • Breedte en hoogte van het apparaat
  • Richting (is het een horizontale of verticale modus op de telefoon of tablet?)
  • Resolutie

Het gebruik van media queries is een populaire techniek om aangepaste stijlsheets te bieden aan desktops, laptops, tablets en smartphones (responsive web design).

U kunt media queries gebruiken om bepaalde stijlen alleen toe te passen op documenten voor afdrukken of schermlezers (mediatype: print, screen of speech).

除了媒体类型之外，还有媒体特性。媒体特性通过允许测试用户代理或显示设备的具体特性，为媒体查询提供了更多特定细节。例如，您可以将样式仅应用于大于或小于特定宽度的屏幕。

另请参阅：

CSS 教程：CSS media query

CSS 教程：CSS 媒体查询实例

RWD 教程：通过媒体查询实现响应式 Web 设计

JavaScript 参考手册：window.matchMedia() 方法

实例

例子 1

如果浏览器窗口的宽度为 600px 或更小时，把 元素的背景颜色更改为“浅蓝色”：

@media only screen and (max-width: 600px) {
  body {
    achtergrondkleur: lichtblauw;
  }
}

probeer het zelf

可以在页面下方找到更多 TIY 实例。

CSS 语法

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

not、only 和 and 关键字的含义：

not：not 关键字反正整个媒体查询的含义。

only：only 关键字可防止旧版浏览器应用指定的样式，这些浏览器不支持带媒体特性的媒体查询。它对现代浏览器没有影响。

and：and 关键字将媒体特性与媒体类型或其他媒体特性组合在一起。

Ze zijn optioneel. Maar als not of only wordt gebruikt, moet ook het media-type worden gespecificeerd.

Je kunt ook verschillende style sheets gebruiken voor verschillende media, zoals hierboven:

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

Media-type

Waarde Beschrijving
all Standaard. Gebruikt voor alle mediatype-apparaten.
print Gebruikt voor printers.
screen Gebruikt voor computerschermen, tablets, smartphones, enz.
speech Gebruikt voor het voorlezen van de pagina door een schermlezer.

Media-eigenschappen

Waarde Beschrijving
any-hover

Is er een beschikbare invoermechanisme dat de gebruiker toestaat (de muis enz.) te blijven hangen op een element?

Wordt toegevoegd in Media Queries Level 4.
any-pointer

Is er een aanwezige invoermechanisme met een aanraakapparaat, en zo ja, hoe accuraat is het?

Wordt toegevoegd in Media Queries Level 4.
aspect-ratio De aspect ratio van het viewport (weergavegebied).
color

Het bitwaarde per pixel van het uitvoerapparaat, vaak 8, 16, 32 bits.

De waarde is 0 als het apparaat geen kleurweergave ondersteunt.
color-gamut

De kleurspectrum dat de gebruikeragent en het uitvoerapparaat ruwweg ondersteunen.

Wordt toegevoegd in Media Queries Level 4.
color-index

Het aantal items in de kleurzoektafel (color lookup table) van het uitvoerapparaat.

De waarde is 0 als het apparaat geen kleurzoektafel gebruikt.
device-aspect-ratio

De aspect ratio van het uitvoerapparaat.

Wordt afgekeurd in Media Queries Level 4.
device-height

De hoogte van het renderoppervlak van het uitvoerapparaat (bijvoorbeeld het scherm).

Wordt afgekeurd in Media Queries Level 4.
device-width

De breedte van het renderoppervlak van het uitvoerapparaat (bijvoorbeeld het scherm).

Wordt afgekeurd in Media Queries Level 4.
display-mode

De weergavemodus van de applicatie, zoals gespecificeerd door het member display in de manifest van een web app.

Wordt gedefinieerd in de Web App Manifest spec.
forced-colors

Of de gebruiker代理限制调色板。

Wordt toegevoegd in Media Queries Level 5.
grid Of het uitvoerapparaat een raster银幕还是点阵银幕使用？
height De hoogte van het viewport (weergavegebied).
hover

Of het primaire invoermechanisme toestaat dat de gebruiker de muis over een element houdt?

Wordt toegevoegd in Media Queries Level 4.
inverted-colors

Of de browser of de onderliggende besturingssysteem de kleuren omgekeerd heeft.

Wordt toegevoegd in Media Queries Level 5.
light-level

Het huidige niveau van omgevingslicht.

Wordt toegevoegd in Media Queries Level 5.
max-aspect-ratio De maximale verhouding tussen de breedte en hoogte van het weergavegebied.
max-color De maximale hoeveelheid bits voor elke kleurcomponent van het uitvoerapparaat.
max-color-index Het maximale aantal kleuren dat het apparaat kan weergeven.
max-height De maximale hoogte van het weergavegebied, bijvoorbeeld een browservenster.
max-monochrome De maximale hoeveelheid bits voor elke 'kleur' op een monochroom (grijswaarden) apparaat.
max-resolution De maximale resolutie van het apparaat, aangegeven in dpi of dpcm.
max-breedte De maximale breedte van het weergavegebied, bijvoorbeeld een browservenster.
min-aspect-ratio De minimale verhouding tussen de breedte en hoogte van het weergavegebied.
min-color De minste hoeveelheid bits voor elke kleurcomponent van het uitvoerapparaat.
min-color-index Het minimale aantal kleuren dat het apparaat kan weergeven.
min-height De minimale hoogte van het weergavegebied, bijvoorbeeld een browservenster.
min-monochrome De minste hoeveelheid bits voor elke 'kleur' op een monochroom (grijswaarden) apparaat.
min-resolution Laagste resolutie van het apparaat, aangegeven in dpi of dpcm.
min-width Minimale breedte van het weergavegebied, bijvoorbeeld het browservenster.
monochrome

Bitdiepte van elke pixel in het monochroom framebuffer van het uitvoerapparaat.

Als het apparaat geen zwart-wit scherm heeft, is deze waarde 0.
orientation Richting van het roteren van het viewport (lansmodus of portraitmodus).
overflow-block

Hoe het uitvoerapparaat omgaat met inhoud die over de blok-as van het viewport uitschuift.

Wordt toegevoegd in Media Queries Level 4.
overflow-inline

Of de inhoud die over de inline-as van het viewport uitschuift, scrolbaar is.

Wordt toegevoegd in Media Queries Level 4.
pointer

Is het primaire inputmechanisme een pointerapparaat? Als dat zo is, hoe nauwkeurig is het?

Wordt toegevoegd in Media Queries Level 4.
prefers-color-scheme

Detecteer of de gebruiker de voorkeur geeft aan een lichte of donkere kleurenschema.

Wordt toegevoegd in Media Queries Level 5.
prefers-contrast

Detecteer of de gebruiker de eis heeft gesteld om de contrastverhouding tussen vergelijkbare kleuren te verhogen of te verlagen.

Wordt toegevoegd in Media Queries Level 5.
prefers-reduced-motion

Of de gebruiker de voorkeur geeft aan minder dynamische effecten op de pagina.

Wordt toegevoegd in Media Queries Level 5.
prefers-reduced-transparency

Of de gebruiker de voorkeur geeft aan lagere helderheid.

Wordt toegevoegd in Media Queries Level 5.
resolution Resolutie van het uitvoerapparaat, aangegeven in dpi of dpcm.
scan Het scanproces van het uitvoerapparaat (toepasbaar op tv's en dergelijke).
scripting

Detecteer of scripting (bijvoorbeeld JavaScript) beschikbaar is.

Wordt toegevoegd in Media Queries Level 5.
update

Frequentie waarmee het renderen van de inhoud van het uitvoerapparaat wordt bijgewerkt.

Wordt toegevoegd in Media Queries Level 4.
width Breedte van het viewport (viewport).

Meer voorbeelden

Voorbeeld 2

Verberg elementen wanneer de breedte van de browser 600px of kleiner is:

@media scherm en (max-breedte: 600px) {
  div.example {
    display: none;
  }
}

probeer het zelf

Voorbeeld 3

Als de breedte van het viewport 800 pixels of breder is, stel de achtergrondkleur in met behulp van de media query op lavendel; als de breedte van het viewport tussen 400 en 799 pixels ligt, stel de achtergrondkleur in met behulp van de media query op lichtgroen. Als het viewport kleiner is dan 400 pixels, is de achtergrondkleur lichtblauw:

body {
  achtergrondkleur: lichtblauw;
}
@media screen and (min-width: 400px) {
  body {
    background-color: lichtgroen;
  }
}
@media screen and (min-width: 800px) {
  body {
    background-color: lavendel;
  }
}

probeer het zelf

Voorbeeld 4

Maak een responsive navigatiemenu (horizontaal weergegeven op grote schermen, verticaal weergegeven op kleine schermen):

@media scherm en (max-breedte: 600px) {
  .topnav a {
    zeilen: geen;
    breedte: 100%;
  }
}

probeer het zelf

voorbeeld 5

Gebruik media queries om een responsive kolomlay-out te maken:

/* Van vier kolommen naar twee kolommen veranderen op schermen van 992 pixels of kleiner */
@media scherm en (max-breedte: 992px) {
  .column {
    breedte: 50%;
  }
}
/* Op schermen met een breedte van 600 pixels of kleiner, stack de kolommen in plaats van ze naast elkaar te plaatsen */
@media scherm en (max-breedte: 600px) {
  .column {
    breedte: 100%;
  }
}

probeer het zelf

voorbeeld 6

Gebruik media queries om een responsive website te maken:

probeer het zelf

voorbeeld 7

Media queries kunnen ook worden gebruikt om de lay-out van de pagina te wijzigen op basis van de orientatie van de browser. U kunt een set CSS-eigenschappen schrijven die alleen van toepassing zijn wanneer de breedte van het browservenster groter is dan de hoogte (dus in 'landschaps' orientatie).

Gebruik een lichte blauwe achtergrondkleur als de orientatie in landschapsmodus is:

@media alleen scherm en (orientatie: landschap) {
  body {
    achtergrondkleur: lichtblauw;
  }
}

probeer het zelf

voorbeeld 8

Gebruik media queries om de tekstkleur in te stellen op groen voor het weergeven van documenten op het scherm, en zwart voor afdrukken:

@media scherm {
  body {
    kleur: groen; 
  }
}
@media afdrukken {
  body {
    kleur: zwart; 
  }
}

probeer het zelf

voorbeeld 9

komma-gescheiden lijst: gebruik een komma om een andere media query toe te voegen aan een bestaande media query (zijn gedrag is vergelijkbaar met een OR-bewerkingssymbool):

/* Wanneer de breedte tussen 600px en 900px ligt of groter is dan 1100px - verander het uiterlijk van <div> */
@media scherm en (max-breedte: 900px) en (min-breedte: 600px), (min-breedte: 1100px) {
  div.example {
    lettergrootte: 50px;
    inschuiven: 50px;
    rand: 8px vast zwart;
    achtergrond: geel;
  }
}

probeer het zelf

browserondersteuning

De cijfers in de tabel vermelden de eerste browserversie die volledig @media-regels ondersteunt.

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