Responsive Design

Wat is responsive design?

Hoe maak je een website responsive?

Min- en max-values

img {
  width: 90%;
  max-width: 300px;
}

img {
  width: 50%;
  mix-width: 50px;
}

Media queries: Oriëntatie (Liggend/Portret)

/* Portretmodus */
@media only screen and (orientation: portrait) {
  body {
    background-color: black;
  }
}

/* Liggende */
@media only screen and (orientation: landscape) {
  body {
    background-color: white;
  }
}

Media queries: Scherm breedte

/* Schermen breder van 700px */
@media screen and (min-width: 700px) {
  body {
    background-color: black;
  }
}

/* Schermen tussen 530px en 700px breed */
@media screen and (max-width: 700px) and (min-width: 530px) {
  body {
    background-color: grey;
  }
}

/* Schermen kleiner dan 530px breed */
@media (max-width: 530px) {
  body {
    background-color: white;
  }
}

Praktische tips

Elementen tonen en verbeteren

Je kan elementen verbergen met display:none, bijvoorbeeld bij een dropdown of mobiele navigatie.

.hidden {
  display: none;
}

Je kan elementen terug zichtbaar maken met:

Fullscreen overlay

Fullscreen overlays worden in webdesign vaak gebruikt om fullscreen menu’s of pop-ups te maken.

.fixed-button {
  position: fixed;
  top: 0px;
  right: 0px;
  z-index: 1;
  background: black;
  opacity: 0.9;
}

Opdracht: Responsive design

Maak een nieuwe website via de regels van responsive design.
Je website heeft deze zaken:

Created on 04/04/2025, last edited on 09/05/2025