CSS media queries

CSS2 introduceerde mediatype

CSS2 introduceerde @media Regels die het mogelijk maken om verschillende stijlregels voor verschillende mediatype te definiëren.

Bijvoorbeeld: je hebt misschien een set stijlregels voor computermonitoren, een set voor printers, een set voor handheld apparaten, zelfs een set voor televisies, enzovoort.

Helaas zijn deze media types, naast de print media types, nooit in grote mate ondersteund door apparaten.

CSS3 introduceerde media queries

De media queries in CSS3 uitbreiden het concept van media types in CSS2: ze zoeken niet naar het type apparaat, maar naar de capaciteiten van het apparaat.

Media queries kunnen veel verschillende dingen controleren, zoals:

  • De breedte en hoogte van het viewport
  • De breedte en hoogte van het apparaat
  • Richting (is het tablet of smartphone in landschaps- of portretmodus?)
  • Resolutie

Het gebruik van media queries is een populaire techniek om aangepaste stylesheets te bieden aan desktops, laptops, tablets en smartphones (bijvoorbeeld iPhone en Android smartphones).

Browser ondersteuning

De cijfers in de tabel vermelden de volledige ondersteuning @media eerste browserversie van de regel.

Eigenschap
@media 21.0 9.0 3.5 4.0 9.0

Media query syntaxis

Media queries bestaan uit een media type en kunnen een of meerdere expressies bevatten die kunnen worden geïnterpreteerd als true of false.

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

Als de opgegeven media type overeenkomt met het type apparaat dat het document weergeeft, en alle expressies in de media query true zijn, dan is het resultaat van de query true. Als de media query true is, wordt de bijbehorende stylesheet of stijlregel toegepast en worden de normale cascade regels gevolgd.

Tenzij u de not of only operatoren gebruikt, is de media type optioneel en impliciet all Type.

U kunt ook verschillende stylesheets gebruiken voor verschillende media:

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

CSS3 media types

Waarde Beschrijving
all Voor alle media type apparaten.
print Voor printers.
screen Voor computerschermen, tablets, smartphones enz.
speech Voor schermlezers die de pagina hardop uitspreken.

Een eenvoudig voorbeeld van media queries

Een manier om media queries te gebruiken is om een alternatieve CSS sectie in de stylesheet te hebben.

De volgende voorbeeld verandert de achtergrondkleur in lichtgroen als de breedte van het viewport 480 pixels of breder is (als de breedte van het viewport kleiner is dan 480 pixels, zal de achtergrondkleur roze zijn):

Voorbeeld

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

Probeer het zelf

De volgende voorbeeld toont een menu dat naar de linkerkant van de pagina schuift als de breedte van het viewport 480 pixels of breder is (als het viewport kleiner is dan 480 pixels, zal het menu boven de inhoud staan):

Voorbeeld

@media scherm en (min-width: 480px) {}}
  #leftsidebar {breedte: 200px; float: links;}
  #main {marge-links: 216px;}
{}

Probeer het zelf

Meer media query voorbeelden

Voor meer voorbeelden van media queries, ga naar de volgende pagina:CSS MQ voorbeeld.

CSS @media referentiehandleiding

Voor een volledige overzicht van alle media types en eigenschappen/expressies, bekijk onze CSS referentie @media regel.