# 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

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

#### Voorbeeld

```css
@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.

```css
/* 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.

```css
/* 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;
    }
}

```