Welche Ansätze zur Erstellung eines adaptiven Designs…

Media Queries: Verwendung von CSS-@media-Regeln, um Stile basierend auf Gerätecharakteristika (Breite, Höhe, Ausrichtung usw.) anzuwenden.
```
/* Beispiel für Media Query */
@media (max-width: 600px) {
  .container {
    width: 90%;
  }
}
```

Flexibles Rasterlayout (Flexible Grid Layout): Erstellung von Layouts unter Verwendung relativer Einheiten (%, vw, vh) und flexibler Eigenschaften (flex, grid).

/* Beispiel für Flexbox */
.parent {
  display: flex;
  flex-wrap: wrap; /* Ermöglicht es Elementen, in eine neue Zeile zu wechseln */
}

.child {
  flex: 1 1 200px; /* Ermöglicht es dem Element, sich zu dehnen, zusammenzuziehen und eine Grundbreite zu haben */
}

Flexible Bilder und Medien: Verwendung der CSS-Eigenschaften max-width, damit Bilder und andere Medien proportional skaliert werden.

/* Beispiel für ein flexibles Bild */
img {
  max-width: 100%; /* Das Bild überschreitet nicht die Breite des Elternelements */
  height: auto;    /* Bewahrt die Proportionen */
}

Mobile-First vs. Desktop-First:
- Mobile-First: Der Stil wird zuerst für mobile Geräte entwickelt und dann für größere Bildschirme mit min-width Media Queries erweitert. Dies gilt als Best Practice, da es die Gestaltung für mobile Ressourcen vereinfacht und die Leistung verbessert.
- Desktop-First: Der Stil wird zuerst für Desktops entwickelt und dann für kleine Bildschirme mit max-width Media Queries reduziert.
Feature Detection (Merkmalserkennung): Verwendung von JavaScript, um die Fähigkeiten des Browsers oder Geräts zu erkennen (z.B. Unterstützung für Touch-Interfaces) und entsprechende Stile oder Funktionen anzuwenden. Tools wie Modernizr können dabei helfen.
Reaktionsfähige Typografie: Änderung der Schriftgröße und Zeilenhöhe in Abhängigkeit von der Bildschirmgröße, häufig unter Verwendung relativer Einheiten (em, rem, vw) und Media Queries.
```
/* Beispiel für reaktionsfähige Typografie */
h1 {
  font-size: 2em;
}

@media (min-width: 768px) {
  h1 {
    font-size: 3em;
  }
}
```
Serverseitige Erkennung: Bestimmung des Gerätetyps oder Browsers auf dem Server und Versand der entsprechenden Version der Seite oder Stile. Wird im modernen Frontend weniger häufig verwendet.

Welche Ansätze zur Erstellung eines adaptiven Designs kennen Sie?