Exploring the Vast Poetic Web

Projektarbeit

Agenda

Media Queries

„Die CSS Media Query bietet Ihnen die Möglichkeit, CSS nur dann anzuwenden, wenn die Browser- und Geräteumgebung einer von Ihnen angegebenen Regel entspricht, beispielsweise ‚Viewport ist breiter als 480 Pixel‘.“

https://developer.mozilla.org

Beispiel

body {
  display: flex;
  flex-direction: row;
}

@media (max-width: 800px) {
  body {
    flex-direction: column;
  }
}

Bei einer Viewport-Breite (Breite des Browserfensters) bis 800px werden die Inhalte des <body>-Tags in einer Spalte untereinander aufgeführt.

Projekte