Was muss in CSS angegeben werden, um diese…

Es wird die Medienabfrage @media verwendet. Innerhalb dieser werden Bedingungen festgelegt, um Stile anzuwenden, basierend auf den Eigenschaften des Geräts oder des Anzeigebereichs.

Hauptparameter der Medienabfragen:

width / height: Breite / Höhe des Anzeigebereichs.
min-width / min-height: Minimale Breite / Höhe des Anzeigebereichs.
max-width / max-height: Maximale Breite / Höhe des Anzeigebereichs.
orientation: Ausrichtung des Geräts (portrait oder landscape).

Beispiel zur Verwendung bei der Einstellung von Breakpoints:

/* Standardstile für Bildschirme kleiner als 768px */
body {
  font-size: 16px;
}

/* Breakpoint für Bildschirme von 768px bis 991px */
@media (min-width: 768px) and (max-width: 991px) {
  body {
    font-size: 18px;
  }
}

/* Breakpoint für Bildschirme ab 992px */
@media (min-width: 992px) {
  body {
    font-size: 20px;
  }
}

Häufig verwendete Strategien zur Festlegung von Breakpoints:

Mobile First: Zunächst werden Stile für die kleinsten Bildschirme definiert, dann werden min-width-Medienabfragen für größere Bildschirme hinzugefügt.
Desktop First: Zunächst werden Stile für große Bildschirme definiert, dann werden max-width-Medienabfragen für kleinere Bildschirme hinzugefügt.

Die Wahl der Strategie hängt vom Projekt und den Präferenzen ab.

Standardwerte für Breakpoints (ungefähr, abhängig vom Framework oder Vereinbarung):

Gerät	Breitenbereich	Medienabfrage (Mobile First)	Medienabfrage (Desktop First)
Kleine Telefone	< 576px	Nicht vorhanden (Basisstile)	`@media (max-width: 575.98px)`
Telefone	>= 576px	`@media (min-width: 576px)`	`@media (max-width: 767.98px)`
Tablets	>= 768px	`@media (min-width: 768px)`	`@media (max-width: 991.98px)`
Laptops	>= 992px	`@media (min-width: 992px)`	`@media (max-width: 1199.98px)`
Desktops	>= 1200px	`@media (min-width: 1200px)`	`@media (max-width: 1399.98px)`
Große Desktops	>= 1400px	`@media (min-width: 1400px)`	Nicht vorhanden (Basisstile)

Es ist wichtig, die Breakpoints anhand des Inhalts und des Layouts zu wählen, nicht nur anhand der Geräte-Standards. Sie sollten dort greifen, wo das Layout anfängt, 'zu brechen'.

Was muss in CSS angegeben werden, um diese Breakpoints zu konfigurieren und anzuwenden?