Welke benaderingen voor het maken van een responsief ontwerp kent u?

Media Queries: Gebruik van CSS @media regels om stijlen toe te passen op basis van apparaatkenmerken (breedte, hoogte van het scherm, oriëntatie, enz.).

/* Voorbeeld Media Query */
@media (max-width: 600px) {
  .container {
    width: 90%;
  }
}

Flexibele rasterlay-out (Flexible Grid Layout): Het maken van lay-outs met behulp van relatieve eenheden (%, vw, vh) en flexibele eigenschappen (flex, grid).

/* Voorbeeld Flexbox */
.parent {
  display: flex;
  flex-wrap: wrap; /* Sta toe dat elementen naar een nieuwe regel gaan */
}

.child {
  flex: 1 1 200px; /* Sta toe dat het element uitrekt, krimpt en een basisbreedte heeft */
}

Flexibele afbeeldingen en media: Gebruik van CSS-eigenschappen max-width zodat afbeeldingen en andere media proportioneel schalen.

/* Voorbeeld flexibele afbeelding */
img {
  max-width: 100%; /* De afbeelding overschrijdt de breedte van de oudercontainer niet */
  height: auto;    /* Behoudt de verhoudingen */
}

Mobile-First vs. Desktop-First:

• Mobile-First: De stijl wordt eerst ontwikkeld voor mobiele apparaten en vervolgens uitgebreid voor grotere schermen met behulp van min-width Media Queries. Wordt als een goede praktijk beschouwd, omdat het de styling voor beperkte mobiele bronnen vereenvoudigt en de prestaties verbetert.
• Desktop-First: De stijl wordt eerst ontwikkeld voor desktops en vervolgens verkleind voor kleine schermen met behulp van max-width Media Queries.

Feature Detectie (Kenmerken detectie): Gebruik van JavaScript om de mogelijkheden van de browser of het apparaat te bepalen (bijvoorbeeld ondersteuning voor touch-interface) en de juiste stijlen of functionaliteit toe te passen. Hulpmiddelen zoals Modernizr kunnen helpen.

Responsieve typografie: Het aanpassen van de lettergrootte en regelhoogte afhankelijk van de schermgrootte, vaak met behulp van relatieve eenheden (em, rem, vw) en Media Queries.

/* Voorbeeld responsieve typografie */
h1 {
  font-size: 2em;
}

@media (min-width: 768px) {
  h1 {
    font-size: 3em;
  }
}

Server-side detectie: Het bepalen van het apparaattype of de browser op de server en het verzenden van de juiste versie van de pagina of stijlen. Minder gebruikelijk in moderne frontend-ontwikkeling.