Homepage-Webhilfe Event-Banner

Media Queries

Media Queries erlauben es, Regelblöcke nur auf bestimmte Ausgabemedien anzuwenden. Hierbei kann sowohl der Typ (Bildschirm oder Drucker) als auch die Auflösung abgefragt werden. Mit Hilfe dieser Technologie werden zum einen Webseiten druckoptimiert und zum anderen responsiv gemacht. Das Erstellen eines solchen „mehrgleisigen“ Layouts bedeutet natürlich mehr Aufwand, doch dieser Aufwand lohnt sich. Spätestens jetzt werden Sie merken, wie wichtig ein gutes HTML-Layout ist.

Für die Definition von Media Queries gibt es mehrere Möglichkeiten. Zum einen ist es möglich, innerhalb einer Datei (oder innerhalb der style-Tags) die sogenannte @media-Rule einzufügen. Dies sieht nun bspw. wie folgt aus:

@media screen
{
    /* Hier kommt der Code für die Browseranzeige! */
}

@media print
{
    /* Hier kommt der Code für die Druckausgabe! */
}

Alternativ können wir den CSS-Code in mehrere Dateien aufteilen und eine Unterscheidung des Medientyps an Hand des media-Attributs im link-Element durchführen:

<link rel="stylesheet" href="/web.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/papier.css" type="text/css" media="print" />

Bei der Angabe eines Medientyps werden die Schlüsselwörter all (alle Medien), screen (Browseranzeige) oder print (Druckausgabe) verwendet. Diese Schlüsselwörter können mit dem Schlüsselwort and und weiteren Angaben kombiniert werden. Mehrere Media Queries können mit Hilfe eines Kommas kombiniert werden. Um die Größe des Ausgabemediums zu überprüfen, stehen uns die Eigenschaften min-width und max-width zur Verfügung. Um solche Eigenschaften in Media Queries einzubauen, wird der Eigenschaftsname gefolgt von einem Doppelpunkt und dem Wert in Klammern notiert. Dies kann dann z. B. so aussehen:

@media screen and (max-width: 800px)
{
    /* Hier kommt der Code! */
}

Eine Angabe wie (min-width: 400px) bewirkt, dass die CSS-Regeln auf alle Geräte angewendet werden, bei welchen die Breite des Ausgabemediums größer oder gleich 400px sind. Eine Angabe wie (max-width: 800px) wendet die CSS-Regeln auf allen Geräte an, bei welchen die Breite des Augabemediums kleiner oder gleich 800px sind.

Wichtig: Ältere Browser unterstützen nur die einfache Form der Media Queries (und nicht die Verwendung der Eigenschaften min-width oder max-width), mit welchen lediglich zwischen screen und print unterschieden wird. Das Problem das hierdurch entsteht, ist, dass der Browser den zuletzt erkannten Medientyp screen fälschlicherweise für alle Browseranzeigen anwendet. Um diesem Problem entgegenzuwirken, notieren wir vor dem Medientyp der „problematischen“ Media Queries das Schlüsselwort only. Moderne Browser ignorieren dieses Schlüsselwort, beachten jedoch das Media Query selbst. Ältere Browser kennen das only Schlüsselwort nicht und verwerfen den kompletten Media Query.

@media only screen and (max-width: 800px)
{
    /* Hier kommt der Code! */
}

Um unsere Webseite für den Druck zu optimieren, können wir ein Media Query mit dem Schlüsselwort print nutzen. Bei der Druck-Optimierung sollte darauf geachtet werden, dass unwichtige Bestandteile der Website ausgeblendet werden. Hierzu zählen z. B. Navigationsleisten oder auch die Fußzeile. Des Weiteren sollte auch beachtet werden, dass Hintergründe (Bild und Farbe) von Browsern standardmäßig nicht gedruckt werden. Deshalb sollten diese in Druck-Layouts weitestgehend vermieden werden.

In CSS gibt es die Eigenschaften page-break-after (Seitenumbruch nach dem Element), page-break-before (Seitenumbruch vor dem Element) und page-break-inside (Seitenumbruch innerhalb des Elements), mit welchen die Umbrüche gesteuert werden können. Für alle Eigenschaften stehen die Werte auto (Browser entscheidet über den Seitenumbruch) und avoid (Seitenumbruch vermeiden, wenn möglich) zur Verfügung. Für die Eigenschaften page-break-after und page-break-before stehen zusätzlich die Werte always (Seitenumbruch immer einfügen), left (fügt einen Seitenumbruch ein, sodass die nächste Seite eine linke Seite ist) und right (fügt einen Seitenumbruch ein, sodass die nächste Seite eine rechte Seite ist) zur Verfügung.

Das folgende Beispiel zeigt ein Webseiten-Layout mit einfachen Druck-Optimierungen:

<div id="seite">
	<header>
		<h1>Meine Webseite</h1>
	</header>
	
	<nav>
		<ul>
			<li><a href="">Seite 1</a></li>
			<li><a href="">Seite 2</a></li>
			<li><a href="">Seite 3</a></li>
			<li><a href="">Seite 4</a></li>
			<li><a href="">Seite 5</a></li>
		</ul>
	</nav>
	
	<main>
		<p>...</p>
		<article>
			<h2>Artikel 1</h2>
			<p>...</p>
		</article>
		<article>
			<h2>Artikel 2</h2>
			<p>...</p>
		</article>
		<article>
			<h2>Artikel 3</h2>
			<p>...</p>
		</article>
		<article>
			<h2>Artikel 4</h2>
			<p>...</p>
		</article>
		<article>
			<h2>Artikel 5</h2>
			<p>...</p>
		</article>
	</main>
	
	<footer>
		<img src="/Bilder/Logo/Logo.jpg" width="50" height="50" alt="Logo" title="Homepage-Webhilfe" />
		<p>
			Copyright 2016 by Homepage-Webhilfe<br />
			All rights reserved!
		</p>
		<br />
	</footer>
</div>
@media all
{
	/* Seiten-Titel */
	header>h1
	{
		margin: 0 0 10px;
		padding: 0;
		text-align: center;
	}
	
	/* Inhaltsbereich */
	main h2
	{
		margin: 25px 0 0;
		padding: 0;
	}
	main p
	{
		margin: 5px 5px 0;
		text-align: justify;
	}
}

@media screen
{
	body
	{
		/* Hintergrundfarbe um Seiten-Container abzusetzen */
		background-color: #EEEEEE;
	}

	/* Seiten-Container */
	#seite
	{
		background-color: white;
		margin: 20px;
		padding: 10px;
	}
	
	/* Navigationsleiste (links mit Aufzählungspunkten) */
	nav
	{
		float: left;
		width: 20%;
	}
	
	/* Inhaltsbereich */
	main
	{
		float: right;
		width: 80%;
	}
	main p:last-child
	{
		/* Abstand zur Fußzeile halten */
		margin-bottom: 40px;
	}
	
	/* Fußzeile
	 *  links -> Bild
	 *  rechts -> Copyright-Hinweis
	 */
	footer
	{
		margin: 0 10px;
		padding-top: 10px;
		/* Elementfluss der Navigationsleiste und des Inhaltsbereichs beenden */
		clear: both;
		border-top: 2px solid black;
	}
	footer>img
	{
		float: left;
		width: 50px;
	}
	footer>p
	{
		float: right;
		width: calc(100% - 50px);
		text-align: center;
		margin: 0;
	}
	footer>br
	{
		/* Elementfluss für Logo und Copyright-Hinweis beenden */
		clear: both;
	}
}

@media print
{
	/* Navigationsleiste -> für Druck ausblenden */
	nav
	{
		display: none;
	}
	
	/* Seitenumbruch steuern */
	main>article
	{
		page-break-inside: avoid;
	}
	
	/* Fußzeile -> für Druck ausblenden */
	footer
	{
		display: none;
	}
}
Vorschau

Responsives-Design Um ein responsives Webdesign zu erstellen, können bei den Media Queries die Eigenschaften min-width und max-width abgefragt werden. Wie bereits oben erklärt, führt eine Angabe wie (max-width: 800px) dazu, dass die dortigen Regeln für alle Geräte mit einer Auflösung von 800px oder kleiner angewendet werden. Bei min-width ist dies genau anders herum. Bei der Notation im CSS-Code oder bei der Einbindung im HTML-Code muss auf die Reihenfolge geachtet werden. Wird max-width verwendet, so müssen die Werte in absteigender Reihenfolge (siehe Beispiel) notiert werden. Bei der Verwendung von min-width hingegen in aufsteigender Reihenfolge.

Bildquelle: Vektor-Grafik von Freepik


Für mobile Geräte muss der sogenannte „Viewport“ eingestellt werden. Dies kann mit Hilfe des meta-Elements und dem Attribut name mit dem Wert viewport eingestellt werden. Im content-Attribut können wir die Breite der Website und den Skalierungsfaktor einstellen. Hierfür notieren wir im content-Attribut den Wert width=device-width. Diese Anweisung bewirkt, dass die angezeigte Größe der Website der verfügbaren Breite des Geräts entspricht. Des Weiteren kann im content-Attribut auch der Wert initial-scale angegeben werden. Hiermit ist es möglich, den Skalierungsfaktor einzustellen. Dieser sollte auf 1.0 gesetzt werden. Hierzu folgendes Beispiel, welches auf vielen Webseiten und auch im unteren Beispiel eingesetzt wird:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Das folgende Beispiel zeigt ein responsives Webdesign, welches eine Bildschirmansicht mit zwei zusätzlichen Abstufungen für kleinere Auflösungen enthält.

<div id="seite">
	<header>
		<img src="/Bilder/Banner/Start-Banner.jpg" alt="Banner" title="Homepage-Webhilfe" />
	</header>
	
	<nav>
		<ul>
			<li><a href="">Seite 1</a></li>
			<li><a href="">Seite 2</a></li>
			<li><a href="">Seite 3</a></li>
			<li><a href="">Seite 4</a></li>
			<li><a href="">Seite 5</a></li>
		</ul>
	</nav>
	
	<main>
		<p>...</p>
		<article>
			<h2>Artikel 1</h2>
			<p>...</p>
		</article>
		<article>
			<h2>Artikel 2</h2>
			<p>...</p>
		</article>
		<article>
			<h2>Artikel 3</h2>
			<p>...</p>
		</article>
		<article>
			<h2>Artikel 4</h2>
			<p>...</p>
		</article>
		<article>
			<h2>Artikel 5</h2>
			<p>...</p>
		</article>
	</main>
	
	<aside>
		<h2>Über uns</h2>
		<p>...</p>
		<h2>Wussten Sie schon?</h2>
		<p>...</p>
	</aside>
	
	<footer>
		Copyright 2016 by Homepage-Webhilfe - All rights reserved!
	</footer>
</div>
@media all
{
	body
	{
		background-color: #EEEEEE;
	}
	
	#seite
	{
		padding: 10px;
		margin: 10px;
		background-color: white;
	}
	
	header>img
	{
		width: 100%;
	}
	
	/* Navigation als 1. Spalte anzeigen */
	nav
	{
		float: left;
		width: calc(20% - 20px);
		margin: 10px;
	}
	
	/* Inhaltsbereich als 2. Spalte anzeigen */
	main
	{
		float: left;
		width: calc(60% - 20px);
		margin: 10px;
	}
	
	/* Nebenbereich als 3. Spalte anzeigen */
	aside
	{
		float: right;
		width: calc(20% - 20px);
		margin: 10px;
	}
	
	footer
	{
		clear: both;
		text-align: center;
	}
}

/* Gilt für alle Bildschirme mit einer Auflösung <= 820px */
@media only screen and (max-width: 820px)
{
	/* Ränder entfernen, sodass Seite direkt am Bildschirmrand beginnt */
	body
	{
		margin: 0;
		padding: 0;
	}
	#seite
	{
		margin: 0;
		padding: 0;
	}
	
	/* Navigation etwas vergrößern und Inhaltsbereich etwas verkleinern */
	nav
	{
		width: calc(30% - 20px);
	}
	main
	{
		width: calc(70% - 20px);
	}
	
	/* Nebenbereich unterhalb des Inhaltsbereichs anzeigen */
	aside
	{
		float: right;
		width: calc(70% - 20px);
		clear: none;
		border-top: 1px solid black;
	}
}

/* Gilt für alle Bildschirme mit einer Auflösung <= 480px */
@media only screen and (max-width: 480px)
{
	/* Navigation jetzt oberhalb des eigentlichen Inhaltes anzeigen */
	nav
	{
		border-bottom: 1px solid black;
	}
	
	/* Navigation, Inhaltsbereich und Neben-Bereich bekommen die volle Breite */
	nav, main, aside
	{
		float: left;
		width: calc(100% - 20px);
		clear: none;
	}
}
Vorschau
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