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; }
}

Meta-Tag für Viewport im Head der Seite

Wichtig ist vor allem im Zusammenhang mit Media-Queries, dass im <head> der Seite das <meta>-Tag für den Viewport eingefügt wird:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <!-- Meta-Tag für den Viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Seitentitel</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
...
</body>
</html>

Das Tag sagt dem Browser, wie er die Seite auf dem Bildschirm darstellen soll – vor allem auf Mobilgeräten.

Das Problem ohne das Tag: Smartphones haben physisch kleine Bildschirme, simulieren aber von Haus aus eine viel größere Breite (oft 980 px). Eine Desktop-Seite wird dann winzig verkleinert dargestellt, damit sie komplett rein passt – alles ist unlesbar klein, der Nutzer muss zoomen.

Was width=device-width bewirkt: Es sagt dem Browser, die Breite des Viewports (also die „virtuelle Leinwand") auf die tatsächliche physische Gerätebreite zu setzen. Ein Smartphone mit 390 px Bildschirmbreite verhält sich dann auch wie 390 px breit – und Media Queries wie @media (max-width: 768px) greifen korrekt. initial-scale=1.0 verhindert zusätzlich, dass der Browser beim ersten Laden automatisch rein- oder raus zoomt.

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.