Einführung in Media-Queries

Media-Queries im Stylesheet über @media (Bedingung) { ... } für verschiedene Ausgabemedien verwenden.

Media-Queries greifen erst ab einer bestimmten Bildschirmbreite — die normalen Regeln gelten immer, die Queries überschreiben gezielt was sich ändern soll:

/* Standard-Regeln: gelten für alle Bildschirmgrößen */
main {
    display: flex;
    flex-direction: row;
}
div { flex: 1 1 33%; }

/* ── Tablet: Viewport ≤ 1000px ────────────────── */
@media (max-width: 1000px) {
    main  { flex-wrap: wrap; }
    div   { flex: 1 1 50%; }           /* 2 Spalten */
    div:first-child { flex: 0 0 100% !important; } /* volle Breite */
}

/* ── Smartphone: Viewport ≤ 480px ─────────────── */
@media (max-width: 480px) {
    main  { flex-direction: column; }  /* untereinander */
    div   { flex: 0 0 100%; }
    h1    { font-size: 20px; }
}
Auf unterschiedlichen Ausgabe-Medien muss der Inhalt entsprechend angepasst dargestellt werden. Hierfür soll allerdings nicht für jedes Medium eine eigene Seite bereitgestellt werden sondern lediglich eine einzige HTML-Seite.
Diese wird dann per CSS für die unterschiedlichen Ausgabeformate unter Verwendung sogenannter Media-Queries angepasst.
Hierbei gilt entweder Desktop first oder Mobile first, also beim größten oder beim kleinsten Format wird angefangen und später wird entsprechend für die weiteren Größen angepasst.