📱 Responsive design

Stap 0: de viewport meta-tag

Zonder dit regeltje zoomt een mobiele browser de pagina uit zodat alles klein lijkt. Dit moet in elke HTML-pagina staan:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

• •width=device-width: gebruik de echte schermbreedte als viewport
• •initial-scale=1.0: begin zonder zoom

Media queries

Een media query past CSS toe alleen als een bepaalde conditie waar is — meestal de schermbreedte.

/* Syntax */
@media (conditie) {
  /* CSS die alleen geldt als conditie waar is */
}

/* Voorbeelden */
@media (max-width: 768px) {
  /* geldt bij schermen smaller dan 768px */
}

@media (min-width: 768px) {
  /* geldt bij schermen breder dan 768px */
}

@media (min-width: 768px) and (max-width: 1024px) {
  /* geldt alleen tussen 768px en 1024px */
}

/* Andere condities */
@media (orientation: portrait) { /* staande schermen */ }
@media (prefers-color-scheme: dark) { /* donker thema van OS */ }
@media print { /* bij afdrukken */ }

Mobile-first: de juiste volgorde

/* Begin groot */
.grid {
  grid-template-columns:
    repeat(3, 1fr);
}
/* Maak kleiner */
@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

/* Begin klein */
.grid {
  grid-template-columns: 1fr;
}
/* Maak groter */
@media (min-width: 768px) {
  .grid {
    grid-template-columns:
      repeat(3, 1fr);
  }
}

Veelgebruikte breakpoints & eenheden

Responsive-vriendelijke eenheden:

/* Vloeiende typografie: nooit kleiner dan 16px, nooit groter dan 24px */
h1 { font-size: clamp(1rem, 4vw, 1.5rem); }

Responsive patronen in de praktijk

.grid {
  display: grid;
  grid-template-columns: 1fr;           /* mobiel: 1 kolom */
  gap: 16px;
}
@media (min-width: 768px) {
  .grid { grid-template-columns: repeat(2, 1fr); } /* tablet: 2 */
}
@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(3, 1fr); } /* desktop: 3 */
}

.nav-links {
  display: none;   /* verberg op mobiel */
}
@media (min-width: 768px) {
  .nav-links {
    display: flex;   /* toon op desktop */
    gap: 24px;
  }
}

.layout {
  display: flex;
  flex-direction: column;  /* mobiel: gestapeld */
}
@media (min-width: 1024px) {
  .layout { flex-direction: row; }   /* desktop: naast elkaar */
  .sidebar { width: 240px; flex-shrink: 0; }
  .content { flex: 1; }
}

Oefening 1 – Responsive grid

Maak een kaartengrid die responsief is (mobile-first):
• body: margin 0, padding 20px, background #f8fafc, font-family sans-serif
• .grid: display grid, grid-template-columns 1fr, gap 16px
• Media query min-width: 600px: .grid krijgt repeat(2, 1fr)
• Media query min-width: 900px: .grid krijgt repeat(3, 1fr)
• .kaart: background wit, border-radius 12px, padding 20px, box-shadow 0 2px 8px rgba(0,0,0,0.08)
• .kaart h3: margin 0 0 8px, color #0f172a
• .kaart p: margin 0, color #64748b, font-size 14px

<div class="grid">
  <div class="kaart">
    <h3>🎨 CSS</h3>
    <p>Stijl en lay-out.</p>
  </div>
  <div class="kaart">
    <h3>🌐 HTML</h3>
    <p>Structuur.</p>
  </div>
  <div class="kaart">
    <h3>🟡 JS</h3>
    <p>Interactiviteit.</p>
  </div>
  <div class="kaart">
    <h3>⚡ PHP</h3>
    <p>Server-side.</p>
  </div>
</div>

Oefening 2 – Responsive navigatie

Maak een navigatiebalk die op mobiel gestapeld is en op groter scherm horizontaal:
• body: margin 0, font-family sans-serif
• nav: background #0f172a, padding 16px
• .logo: color #2dd4bf, font-weight 700, font-size 18px, display block, margin-bottom 12px
• .links: display flex, flex-direction column, gap 8px, list-style none, margin 0, padding 0
• .links a: color #94a3b8, text-decoration none, font-size 14px, padding 6px 0
• Media query min-width: 768px: nav display flex + align-items center + justify-content space-between, .logo margin-bottom 0, .links flex-direction row + gap 24px

<nav>
  <span class="logo">⚡ Site</span>
  <ul class="links">
    <li><a href="#">Home</a></li>
    <li><a href="#">Over</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Quiz