Webdesign - Webseiten planen, gestalten - Free-Hack Library

Abb. 4.4.3e, f: Ein schönes Beispiel für den
Einsatz von CSS Media Queries. Verringert sich
die Breite des Browsers, wird irgendwann das
Spaltendesign aufgebrochen und die Inhalte
der schmaleren Breite angepasst.
Quelle: A list apart: http://www.alistapart.com/
articles/responsive-web-design/
W3C: http://www.w3.org/TR/css3-mediaqueries/
78
CSS
Exkurs: CSS Media Queries
Richtig spannend wird die @media-Regel (s. S. 73) durch die in
CSS 3 eingeführten CSS Media Queries. Mit ihnen ist es möglich,
die Einbindung der Stylesheets von bestimmten Merkmalen des
Ausgabegeräts abhängig zu machen. So kann z. B. ein mehrspaltiges
Layout für unterschiedlich breite Bildschirme auch unterschiedlich
dargestellt werden. Ein sehr schönes Beispiel, wie so etwas aussehen
kann, finden Sie bei A list apart.
Die Verwendung von CSS Media Queries erleichtert vor allem den
Umgang mit unterschiedlichen Bildschirmauflösungen enorm,
man denke hier nur an Computermonitore, Notebooks, Netbooks,
Tablets und Smartphones, die in großer Anzahl und mit jeweils
eigenen Auflösungen auf den Markt kommen. An einem einfachen
Beispiel soll die Funktionsweise der CSS Media Queries kurz erklärt
werden.
Bei Media Queries handelt es sich um Ausdrücke, die die Angabe
von Ausgabemedien und bestimmten Medienmerkmalen miteinander
logisch verknüpfen. Die Ausgabemedien (s. S. 65) sind
Ihnen bereits bekannt, einige der wichtigsten Medienmerkmale
sind beispielsweise:
width, height, device-width, device-height, und orientation, wobei
einige der Merkmale ein vorangestelltes min oder max unterstützen.
Eine vollständige Liste finden Sie beim W3C.
Als logische Verknüpfungen können Und-Verknüpfungen (and),
Oder-Verknüpfungen (,), Negationen (not) und das only-Behelfskonstrukt
zum Ausschließen älterer Browser verwendet werden.
Die Queries können überall dort eingesetzt werden, wo Sie die
media-Eigenschaft verwenden können:
@import url("style.css") screen;
@media screen {
...
}