CSS & Styling

Wat zijn media queries en hoe maak je responsive design?

Media queries passen CSS toe op basis van device karakteristieken.

Home/Categorieën/CSS & Styling/Wat zijn media queries en hoe maak je responsive design?

Media query syntax

@media (condition) { CSS hier } Bijvvoorkeur condities: max-width, min-width, orientation, color-scheme

Mobile-first approach

Begin met styling voor mobiele devices. Gebruik media queries om GROTER worden te styleren. Dit is efficiënter dan desktop-first.

Code Voorbeelden

CSSResponsive grid met media queries
.grid {
  display: grid;
  gap: 20px;
}

/* Mobile - 1 kolom (standaard small screen) */
.grid {
  grid-template-columns: 1fr;
}

/* Tablet - 2 kolommen */
@media (min-width: 768px) {
  .grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Desktop - 3 kolommen */
@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Large screens - 4 kolommen */
@media (min-width: 1440px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

💡 Praktijk Tips

Mobile-first is standard nu. Common breakpoints: 768px (tablet), 1024px (desktop), 1440px (large).

Relevante trefwoorden

media queryresponsivemobile-firstbreakpoint
← Terug naar CSS & StylingAlle categorieën →