Media-Queries

Für responsives Webdesign sind gesetzte Breakpoints unabdingbar, um die Ausgabe für verschiedene Endgeräte und deren unterschiedliche Bildschirmbreiten zu optimieren. Dies geschieht mit sogenannten Media-Queries.

Um Media-Queries im Stylesheet bzw. in der CSS-Datei zu setzen, gibt es drei Möglichkeiten:

1. Mobile First

Orientierung von kleinen nach großen Endgeräten.

.style {
   ...
}

@media (min-width: 768px) {
   .style {
      ...
   }
}

2. Desktop First

Orientierung von großen nach kleinen Endgeräten.

.style {
   ...
}

@media (max-width: 767px) {
   .style {
      ...
   }
}

3. Zwischenbereich

Ein Bereich zwischen zwei Breakpoints wird abgedeckt.

.style {
   ...
}

@media (min-width: 576px) and (max-width: 767px) {
   .style {
      ...
   }
}