Responsive Design met CSS

Min- en max-values

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

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

In CSS stellen min en max values de minimale en maximale grootte van een element in. Dit is handig bij het ontwerpen van responsive websites, omdat het elementen kan helpen zich aan te passen aan verschillende schermgroottes en apparaten zonder media-queries te moeten gebruiken.

Het werken met min en max values is vaak simpeler (op een goede manier) dan werken met media-queries, omdat je per element enkel een minimale of maximale grootte moet instellen, zonder je ontwerp te moeten gaan aanpassen voor meerdere schermformaten.

Voorbeeld:

.alwaysMaxWidth {
    width: 90%;
    max-width: 300px;
}

<div class="alwaysMaxWidth">
    Deze elementen zullen een maximale grootte hebben, zolang zullen nooit groter worden dan 300px.<br>
    Dit is zeer handig afbeeldingen die zo groot mogelijk moeten zijn zonder verlies van kwaliteit.
</div>
<img class="alwaysMaxWidth" src="images/big.png">
www x

Media queries

Media queries stellen ons in staat om specifieke CSS-regels toe te passen op basis van de eigenschappen van het apparaat.

<body>
	Dit is mijn <span class="text"></span> website.
</body>

.text::before {
    content: 'desktop';
    color: goldenrod;
    margin-left:  10px;
    margin-right: 10px;
}

/* gebruik deze styling als het scherm 500px of minder breed is */
@media screen and (max-width: 500px) {
    body {
        background-color: black;
        color: white;
    }
    
    .text::before {
        content: 'mobile';
    }
}

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;
  }
}

Scherm breedte

/* Schermen breder dan 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;
  }
}

Volgorde is belangrijk

Media queries mag je overal in je CSS-bestand zetten. Wat telt, is de volgorde van je code.

De laatste regel wint!

@media (min-width: 768px) {
  body {
    background: red;
  }
}

body {
  background: blue;
}

Bij gelijke specificiteit geldt: de laatste regel wint.
Dus zelfs als de media query actief is, wordt die overschreven door .body { background: blue; }
Je website zal dus alijd blauw zijn.

Correcte code:

body {
  background: blue;
}

@media (min-width: 768px) {
  body {
    background: red;
  }
}

Daarom zet je media queries best onderaan het bestand!

Media queries combineren

Het is mogelijk meerdere media queries met elkaar te combineren.

alt text

<body>
    <p class="orientatie">Oriëntatie</p>
    <p class="text">Font-size</p>
</body>

body {
    font-size: 30px;
    color: grey;
}

/* ********** */
/* orientatie */
/* ********** */

/* Portrait (verticaal) */
@media only screen and (orientation: portrait) {
    body {
        background-color: black;
        color: white;
    }
    .orientatie::after {
        content: ': portrait';
    }
}
  
/* Landscape (horizontaal) */
@media only screen and (orientation: landscape) {
    body {
        background-color: white;
        color: black;
    }
    .orientatie::after {
        content: ': landscape';
    }
}

/* ********** */
/* screensize */
/* ********** */

/* Schermen breder dan 700px */
@media screen and (min-width: 700px) {
    .text {
        font-size: 100px;
    }
    .text::after {
        content: ': 100px';
    }
}

/* Schermen tussen 700px en 530 px breed */
@media screen and (max-width: 700px) and (min-width: 530px) {
    .text {
        font-size: 80px;
    }
    .text::after {
        content: ': 80px';
    }
}

/* Schermen kleiner dan 530px breed */
@media (max-width: 530px) {
    .text {
        font-size: 30px;
    }
    .text::after {
        content: ': 30px';
    }
}

Media query breakpoints

Media query breakpoints zijn de specifieke schermgroottes die je instelt om je design aan te passen, dit zijn veelgebruikte breakpoints.
Maar pas op, met het grote veranderende aanbod aan toestellen kunnen er altijd uitzonderingen zijn.

Developer tools

Zowel Firefox als Chrome hebben ingebouwde opties voor het ontwikkelen van mobiele en responsieve websites in hun Developer Tools via F12 of rc > inspect of ham > Developer tools .

www x

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;
}

Oefeningen

www x
o

Maak een responsive gallery website met minstens 3 afbeelding.

info

Hou deze oefening bij want we gaan er nog op verder werken.

Oefening 2: Sidebar menu

www x

Maak een sidebar menu met deze eigenschappen:

Opdracht 3: Alle technieken combineren

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

Last edited: 14/10/2026
Created: 04/04/2025