CSS Media Queries - Voorbeelden

CSS Media Queries - Meer voorbeelden

Laten we meer voorbeelden van media queries bekijken.

Media queries zijn een populaire techniek om aangepaste stijlsheets te leveren aan verschillende apparaten.

Hier is een eenvoudig voorbeeld om te laten zien hoe u de achtergrondkleur van verschillende apparaten kunt wijzigen:

CSS mediakwesties

Voorbeeld

/* Stel de achtergrondkleur van het body-element in op kastanjebruin */
body {
  background-color: tan;
}
/* Op schermen kleiner of gelijk aan 992 pixels, stel de achtergrondkleur in op blauw */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}
/* Op schermen van 600 pixels of kleiner, stel de achtergrondkleur in op olijf */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}

Probeer het zelf

Wilt u weten waarom we exact 992px en 600px gebruiken? Dit zijn de zogenaamde 'typische breaks' (typical breakpoints) van het apparaat. U kunt deze vinden in onze Responsive Web Design handleiding Leer meer over typische breaks in de Chinese taal.

Media queries voor het menu

In dit voorbeeld gebruiken we media queries om een responsieve navigatiemenu te maken dat verschilt op verschillende schermgrootte.

Grote schermen:

Kleine schermen:

Voorbeeld

/* Navbar-container */
.topnav {
  overflow: hidden;
  background-color: #333;
}
/* Navbar-link */
.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* Op schermen met een breedte van 600 pixels of minder, laten de menuverwijzingen stapelen in plaats van naast elkaar te staan */
@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

Probeer het zelf

Media queries voor kolommen

Een veelvoorkomende toepassing van media queries is het maken van een flexibele lay-out. In dit voorbeeld maken we een lay-out die varieert tussen vier kolommen, twee kolommen en volledige breedtekolommen, afhankelijk van verschillende schermgrootte:

Grote schermen:

Middelgrote schermen:

Kleine schermen:

Voorbeeld

/* Vier gelijke, naast elkaar zwevende kolommen creëren */
.column {
  float: left;
  width: 25%;
}
/* Van vier kolommen naar twee kolommen op schermen van 992 pixels of kleiner */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}
/* Op schermen met een breedte van 600 pixels of minder, laten de kolommen stapelen in plaats van naast elkaar te staan */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Probeer het zelf

Tip:de modernere manier om een kolombenadering te maken is het gebruik van CSS Flexbox (zie het voorbeeld hieronder). Maar Internet Explorer 10 en eerder ondersteunen dit niet. Als u ondersteuning nodig heeft voor IE6-10, gebruik dan float (zoals hierboven getoond).

Om meer te leren over het modulair ontwerp van flexbox, raadpleeg CSS Flexbox hoofdstuk.

Om meer te leren over responsieve webontwerp, raadpleeg ons Responsive Web Design handleiding.

Voorbeeld

/* ContAINER van het flexbox */
.row {
  display: flex;
  flex-wrap: wrap;
}
/* Vier gelijke kolommen creëren */
.column {
  flex: 25%;
  padding: 20px;
}
/* Van vier kolommen naar twee kolommen op schermen van 992 pixels of kleiner */
@media screen and (max-width: 992px) {
  .column {
    flex: 50%;
  }
}
/* Op schermen met een breedte van 600 pixels of minder, laten de kolommen stapelen in plaats van naast elkaar te staan */
@media screen and (max-width: 600px) {
  .row {
    flex-direction: column;
  }
}

Probeer het zelf

Elementen verbergen met media queries

Een andere veelvoorkomende toepassing van media queries is het verbergen van elementen op verschillende schermgrootte:

Ik zal dit element op kleine schermen verbergen.

Voorbeeld

/* Als de schermgrootte 600 pixels of kleiner is, verberg dit element */
@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

Probeer het zelf

Verander lettergrootte met media query

U kunt ook media queries gebruiken om de lettergrootte van elementen op verschillende schermgroottes te wijzigen:

Veranderbare lettergrootte.

Voorbeeld

/* Als de schermgrootte groter is dan 600 pixels, stel de lettergrootte van <div> in op 80 pixels */
@media screen and (min-width: 600px) {
  div.example {
    font-size: 80px;
  }
}
/* Als de schermgrootte 600 pixels of kleiner is, stel de lettergrootte van <div> in op 30 pixels */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

Probeer het zelf

Elastische afbeeldingsgalerij

In dit voorbeeld gebruiken we de media query samen met flexbox om een responsive afbeeldingsgalerij te creëren:

Voorbeeld

Probeer het zelf

Elastische website

In dit voorbeeld gebruiken we de media query samen met flexbox om een responsive website te creëren met een elastische navigatiebalk en elastisch inhoud.

Voorbeeld

Probeer het zelf

Richting: Portret / Landschap

Media queries kunnen ook worden gebruikt om de lay-out van de pagina te wijzigen op basis van de richting van de browser.

U kunt een set CSS-eigenschappen instellen die alleen van toepassing zijn wanneer de breedte van het browservenster groter is dan de hoogte, wat bekend staat als portrait modus:

Voorbeeld

Gebruik een lichte blauwe achtergrondkleur wanneer de richting in landscape-modus is:

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

Probeer het zelf

Van minimale breedte naar maximale breedte

U kunt ook de max-width en min-width-eigenschappen gebruiken om de minimale en maximale breedte in te stellen.

Bijvoorbeeld, wanneer de breedte van de browser tussen 600 en 900 pixels ligt, wijzig het uiterlijk van het <div>-element:

Voorbeeld

@media screen and (max-width: 900px) and (min-width: 600px) {
  div.example {
    font-grootte: 50px;
    vulling: 50px;
    rand: 8px vast zwart;
    achtergrond: geel;
  }
}

Probeer het zelf

Gebruik van toegevoegde waarde: In onderstaand voorbeeld gebruiken we een komma (gelijk aan OR-bewerking) om aanvullende media queries toe te voegen aan bestaande media queries:

Voorbeeld

/* Wanneer de breedte tussen 600 en 900 pixels ligt of groter is dan 1100 pixels - wijzig het uiterlijk van <div> */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-grootte: 50px;
    vulling: 50px;
    rand: 8px vast zwart;
    achtergrond: geel;
  }
}

Probeer het zelf

CSS @media referentiehandleiding

Een volledige overzicht van alle mediatypes en eigenschappen/expressies, raadpleeg CSS referentie @media regel.

Tip:Voor meer informatie over responsief Web design (hoe je voor verschillende apparaten en schermen moet ontwerpen) en het gebruik van media query breakpoints, lees onze Responsive Web Design handleiding.