php-homepage.com

Media Queries in CSS3

Speziell für Responsive Design empfiehlt sich dieses CSS3-feature, weshalb ich hier nochmal gesondert auf die media queries eingehen möchte.

Was sind media queries?

Die Übersetzung dazu sagt eigentlich schon alles: Medienabfragen; Vormals media types genannt, kann man mit queries nun mittels css abfragen, welches Gerät die Webseite und somit das eingebundene Stylesheet aufruft.
Da man mit einem responsive layout nicht alle Geräte optimal bedienen kann, die Auflösungen reichen zur Zeit von 320 Pixel width(Breite) bis 1920 Pixel (full HD) und mit den aktuellen 4k Geräten sogar noch viel mehr, ist es sinnvoll für bestimmte Auflösungsbereiche ein seperates Stylesheet zur Verfügung zu stellen.
Mittels Media Queries kann man nun die Auflösung des Gerätes, die Größe des Browserfensters, Ausrichtung (horizontal/vertikal) und noch einige Informationen über das Gerät aufrufen.

Wozu braucht man diese Informationen?

Ich verwende je nach Seite (abhängig von Größe der Photos/Images, Zielgruppe usw.) gerne eine min-width für den äußeren Container. Dies stellt sicher, dass der große Content-Bereich und die "sidebar" (der schmale Container rechts) je nach Auflösung des Betrachters skalieren und immer möglichst gleich dargestellt werden. (ohne min-width des äußeren Containers würde die sidebar bei kleineren Auflösungen nach unten rutschen. Auch das horizontale Menü (fluid) benötigt einen gewissen Platz.
Diese Vorgehensweise hat aber einen Makel:
Angenommen man betrachtet die Seite mit einer horizontalen Auflösung von 1024 bis 1920 Pixel, würde ich min-width auf etwa 1000 Pixel setzen.
(1024 minus 20 bis 24 Pixel, abhängig vom Browser werden diese 20 bis 24 Pixel für die vertikele Scrolleiste und die Ränder des Browserfensters benötigt)
Da eine min-width von 1000 Pixel bei einem Smartphone mit 320 Pixel horizontaler Auflösung aber einen sehr langen horizontalen Scrollbalken erzwingen würde, braucht man hier eine elegantere Lösung.
Ohne auf den Vieport oder irgendwelche Javascripts einzugehen, ist die einfachste Lösung meiner Meinung nach die praktikabelste:
Ein Stylesheet für Auflösungen unter 460 Pixel und ein weiteres für Geräte ab 460 Pixel width. (die 460 hab ich mehr oder weniger frei gewählt, irgendwo muss man ja anfangen)

Praktische Verwendung von media queries:

Da man aus oben genannten Gründen je nach Gerät mindestens zwei verschiedene Stylesheets verwenden möchte, bietet sich hier an mittels media query die Auflösung abzufragen:
<link rel="stylesheet" media="screen and (max-width:719px)" href="/styles/small.css" />
Für Geräte über 460 Pixel Auflösung wird das standard Stylesheet verwendet:
<link rel="stylesheet" media="screen and (min-width: 720px)and (max-width: 1023px)" href="/styles/standard.css" />

Somit kann man verschiedenen Geräten ganz einfach unterschiedliche Stylesheets zuweisen.

In meinem Fall habe ich hier eine Kopie des "Standard" CSS-Files erstellt und im "small.css"nur die min-width Angaben an Geräte mit geringerer Auflösung angepasst.
Natürlich funktionieren media queries auch als inline style. Die Syntax ändert sich geringfügig:
@media screen and (min-width: 720px){ Styles direkt hier rein }

Eine vollständige Liste der media queries: W3C

CSS Hintergrundbilder in verschiedenen Auflösungen abhängig von Bildschirmgröße bzw. Auflösung mit Media Queries

Eine sinnvolle Nutzung von Media Queries ist es, etwa für Mobilgeräte kleinere Bilder bereitzustellen (Ladezeit und Performance in der Darstellung).
So habe ich vom Logobild ganz oben mehrere Varianten (300px,500px) erstellt, die jeweils als Hintergrundbild des "Header" divs fungieren: einmal die kleinere Variante im "small.css":
#header{ background-image: url("/styles/logo300.jpg"); background-repeat: no-repeat; background-position: center; }

und die 500 Pixel breite Variante des Logos für mittlere Auflösungen:
#header{ background-image: url("/styles/logo500.jpg"); background-repeat: no-repeat; background-position: center; }

Logo mit background-image clickable

damit das Logo(Hintergrundgrafik) "klickbar" wird, noch als Inhalt des header-divs den Link zum Root(Homepage):
<header> <a href="/" title="homepage mit php, xhtml, css oder cms"><p>&nbsp;</p></a> </header> als "Linktext" fungiert ein leerer Absatz, ein kleiner Trick um das background-image clickable zu machen.

Achtung, ein wichtiger Schritt fehlt noch!

Damit die jeweiligen Mobilgeräte mit den per media querry eingebunden Stylesheets auch richtig umgehen, fehlt noch folgende Meta Angabe:
<meta name="viewport" content="initial-scale=1">
Da erst die wenigsten Webseiten per media queries oder sonstwie für Mobilgeräte optimiert sind, versuchen Geräte mit kleinerer (physikalischer) Auflösung, mittels zoom-out die Seite übersichtlich darzustellen.
die oben genannte Meta Angabe sagt dem Gerät, dass die Seite für Mobilgeräte optimiert ist, und es nicht herauszoomen soll (Schrift wird sonst winzig).