Media-Queries in CSS

Mit CSS ist es möglich, für unterschiedliche Medien (z. B. den Ausdruck) eine Webseite komplett umzugestalten. Dazu gibt es in CSS die sogenannten Media-Queries. Sie können für unterschiedliche Medien entweder unterschiedliche CSS-Dateien verwenden oder innerhalb der CSS-Datei Media-Anweisungen notieren. Doch zunächst schauen wir uns die unterschiedlichen Medientypen an:

Wichtig: Von der oben genannten Medientypen sind, neben dem Typ all, eigentlich fast nur screen und print von Bedeutung.

Haben wir uns dazu entschieden die CSS-Anweisungen der unterschiedlichen Medientypen in mehrere Dateien aufzuteilen, so müssen wir im link-Element lediglich das media-Attribut verwenden:

<link rel="stylesheet" href="bildschirm.css" media="screen" />
<link rel="stylesheet" href="druck.css" media="print" />

Wie bereits oben erwähnt, ist es jedoch auch möglich, innerhalb der gleichen CSS-Datei unterschiedliche Medientypen zu integrieren. Dafür muss der CSS-Code, welcher nur für ein bestimmtes Medium gelten soll innerhalb eines @media-Blocks notiert wird. Dies sieht dann z. B. so aus:

@media screen
{
    /* Gilt für die Darstellung auf Bildschirmen */
}
@media print
{
    /* Gilt für die Ausgabe auf Papier */
}

Übrigens: Es ist gängige Praxis, ein Basislayout zu besitzen, welches für alle Medientypen verfügt und dann dieses über Mediaanweisungen (z. B. das Ausblenden der Navigationsleiste beim Druck) zu erweitern.

Wichtig: Ein Tutorial zu Media-Queries (auch in Bezug auf responsives Webdesign) finden Sie in unserem CSS-Kurs.