Responsive Design met Media Queries

Wat zijn Media Queries?

Media queries in CSS stellen je in staat om stijlregels toe te passen op basis van kenmerken van het apparaat, zoals schermgrootte, resolutie, oriëntatie, enz.

Basis Syntax

@media (media-type) and (expressie) {
    /* CSS-regels hier */
}

Voorbeeld

@media screen and (max-width: 768px) {
    /* Stijlen voor schermen kleiner dan of gelijk aan 768px */
}

Toepassen op je Website

Stap 1: Mobile-First Benadering

Begin met het ontwerpen voor mobiele apparaten en schaal op naar grotere schermen.

Stap 2: Aanpassen van de Grid Layout

Voor kleinere schermen wil je wellicht dat je layout verandert naar één kolom.

/* Basis layout voor mobiel */
.grid-container {
    display: grid;
    grid-template-columns: 1fr;
}

/* Voor grotere schermen */
@media (min-width: 769px) {
    .grid-container {
        grid-template-columns: 2fr 1fr;
    }
}

Stap 3: Aanpassen van Navigatie

Voor mobiel kun je de navigatie vereenvoudigen.

/* Mobiele navigatie */
nav {
    background-color: #00539C;
}

.nav-list {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nav-list li {
    margin: 10px 0;
}

/* Desktop navigatie */
@media (min-width: 769px) {
    .nav-list {
        flex-direction: row;
    }

    .nav-list li {
        margin: 0 15px;
    }
}