Dies ist eine alte Version des Dokuments!
Responsive Webdesign - Media Queries (CSS3)
Einleitung
Mit CSS3 sind die Media Queries (Medienabfragen) hinzugekommen. Damit können Sie Medien bezüglich der Grösse des Geräts, Bildschirmauflösung, Orientierung (Hoch- oder Querformat) oder Eingabemöglichkeiten (Maus, Touch, Tastatur, Sprache) abgefragt werden, um ein entsprechendes Design zurückzuliefern. Die häufigste Abfrage ist die Breit das Webbrowser-Fensters.
Media Queries einbinden und anwenden
Die Media Queries können auf verschiedene Arten eingebunden und verwendet werden. Die Verwendung einer solchen Medienabfrage in HTML werden nachfolgend dargelegt.
Variante 1 - im <head>-Element
... <head> <link rel="stylesheet" type="text/css" href="css/basis.css" /> <link rel="stylesheet" type="text/css" media="screen and (max-width: 480px)" href="css/mobile.css" /> </head> ...
Hier wird mobile.css nur verwendet, wenn die maximale Bildschirmbreite 480 Pixel nicht überschritten wird. Bei Geräten mit einer höheren Auflösung wird
basis.css
verwendet. Ältere Webbrowser, die die CSS3-Media Queries (hier: media=„screen and (max-width: 480px)“) nicht kennen, ignorieren diese Abfrage und verwenden immer
basis.css
– auch wenn der Bildschirm unter 480 Pixel breit ist.
<a name=„variante-2—im-ltstylegt-element“></a> #### Variante 2 - im
<style>
-Element Auch das Einbinden von Abfragen im öffnenden style-Tag ist wie folgt möglich:
``` <style type=„text/css“ media=„screen and (max-width: 480px)“> </style> ```
<a name=„variante-3—mit-der-64media-regel“></a> #### Variante 3 - mit der
@media
-Regel Neben dem
<link>
- und
<style>
-Element können Media Queries auch als
@media
-Regel innerhalb eines Stylesheets notieren.
``` … #mainarticle {
background-color: yellow;
} @media screen and (max-width: 480px) {
#mainarticle {
background-color: orange;
}
} … ```
Hier wird die
@media
-Regel, den Hintergrund von
#mainarticle
orange zu färben, nur verwendet, wenn die maximale Bildschirmgröße nicht die 480 Pixel überschritten hat. Ansonsten wird der Hintergrund von
#mainarticle
mit gelber Farbe eingefärbt.
<a name=„variante-4—mit-der-64import-regel“></a> #### Variante 4 - mit der
@import
-Regel Als letzte Variante wird die
@import
-Regel nachfolgend veranschaulicht: ``` … @import url('css/mobile_480.css')
screen and (max-width: 480px);
… ```
<a name=„medienmerkmale-verknüpfen“></a> ### Medienmerkmale verknüpfen Das mehrere Medienmerkmal können mit dem Schlüsselwort
and
verknüpft. Die Verknüpfung kann auch mit und ohne Medientyp erfolgen.
<a name=„beispiel-mit-and-verknüpfung“></a> #### Beispiel mit
and
-Verknüpfung Bei der zweiten Media Query wird das Stylesheet dazwischen nur dann verwendet, wenn alle mit and verbundenen Ausdrücke und Kriterien erfüllt werden. Im Beispiel muss der Medientyp ein Bildschirm sein und die Bildschirmbreite beträgt mindestens 768 Pixel und maximal 960 Pixel.
``` … @media screen and (min-width: 960px) {} @media screen and (min-width: 768px) and (max-width: 960px) {
/* CSS-Anweisungen für Tablets und Netbooks */}
@media screen and (max-width: 480px) { } … ```
<!– <a name=„beispiel-mit-only-verknüpfung“></a> #### Beispiel mit
only
-Verknüpfung Mit
only
wird gesorgt, dass ältere Webbrowser nichts mit der Media Query anfangen können.
Ein alter Webbrowser kennt
@media screen
(CSS2). Mit
only
ignoriert der Webbrowser die Angabe von
and (max-width: 480px)
(CSS3). Damit wird CSS-Anweisungen für Smartphones auch auf einem Desktop verwendet:
``` … @media only screen and (max-width: 480px) { } … ``` –>