Verschillende mediums en verschillende breedtes

Het gebruik van mediaquery's is een populaire techniek voor het leveren van een op maat gemaakte stylesheet (responsive webdesign) aan desktops, laptops, tablets en mobiele telefoons.

U kunt mediaquery's ook gebruiken om te specificeren dat bepaalde stijlen alleen voor afgedrukte documenten of voor schermlezers zijn (mediatype: print, scherm of spraak).

// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

Bekijk het voorbeeld hier en maak dit eerst na. 

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Bekijk hier een voorbeeldje. 

@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}
of in flex taal
@media screen and (max-width: 600px) {
  .topnav a {
    flex-direction: column;
    width: 100%;
  }
}

Bepaamde elementen worden verborgen in de mobiele versie van je website: 

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