Homepage-Webhilfe Event-Banner

Media-Queries in CSS

geschrieben von Benjamin Jung am 27.02.2014 20:02:14 (editiert am 05.08.2017 19:55:43)

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:

all Gilt für alle Medientypen.
screen Gilt für die Darstellung auf dem Bildschirm.
projection Gilt für die Darstellung auf Projektoren.
handled Gilt für die Darstellung auf tragbaren Computern.
tv Gilt für die Darstellung auf TV-Geräten.
print Gilt für die Ausgabe auf Papier.
aural Gilt für die sprachliche Ausgabe.

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.

» Hallo Gast • Anmelden
Um unsere Webseite für Sie optimal zu gestalten und fortlaufend verbessern zu können, verwenden wir Cookies. Durch die weitere Nutzung der Webseite stimmen Sie der Verwendung von Cookies zu. Weitere Informationen OK