LU05b - Responsive Webdesign - Media Queries (CSS3) [BZZ

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
<span class="iconify mr-1 svg-loading" data-icon="mdi:arrow-left"></span>====== LU05b - Responsive Webdesign - Media Queries (CSS3) ======

===== Einleitung =====

Für die Umsetzung von Responsive Webdesign sind mit CSS3 die Media Queries (Medienabfragen) hinzugekommen. Media Queries sind mächtiger als die veralteten Media Types und flexibler. Sie prüfen die Merkmale von Ausgabegeräten detaillierter und können die alten Media Types einbeziehen. Damit können 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 Breite des Webbrowser-Fensters.

{{:modul:m287:learningunits:lu05:media-queries.png?600|}}

===== Media Queries einbinden und anwenden =====

Media Queries können auf verschiedene Arten eingebunden und verwendet werden. Die Verwendung einer solchen Medienabfrage in HTML wird nachfolgend dargelegt.

In erster Linie nutzen Media Queries für das Responsive Webdesign sogenannte Breakpoints, an denen sich die Darstellung ändert. Ein Breakpoint ist also der Punkt, an dem das Design auf ein anderes Layout umspringt. Hier ist ein Beispiel für eine Medienabfrage, die den Inhalt zurückgibt, wenn die Breite des Geräts kleiner oder gleich 420px ist:

<code>
(max-width: 420px)
</code>

<color #ed1c24>Wichtig zu wissen:</color> Bei Media Queries (z.B. mit dem <link>-Element) werden alle vorhandenen Stylesheets heruntergeladen, auch wenn diese gar nicht benötigt werden.

==== Variante 1 - im <head>-Element ====
<code html>
...            
<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>
...
</code>

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.

==== Variante 2 - im <style>-Element ====
Auch das Einbinden von Abfragen im öffnenden style-Tag ist wie folgt möglich:

<code html>
<style type="text/css" media="screen and (max-width: 480px)">
/* CSS-Anweisungen für Bildschirm bis max. 480 Pixel */
</style>
</code>

==== Variante 3 - mit der @media-Regel ====
<code css>
...
#mainarticle {
    background-color: yellow;
}
@media screen and (max-width: 480px) {  
    #mainarticle {    
        background-color: orange;  
    }
}
...
</code>

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.

===== 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.

==== 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.

<code css>
...
@media screen and (min-width: 960px) {  
    /* CSS-Anweisungen für Desktop */}
@media screen and (min-width: 768px) and (max-width: 960px) {
    /* CSS-Anweisungen für Tablets und Netbooks */}
@media screen and (max-width: 480px) {  
    /* CSS-Anweisungen für Smartphones */
}
...
</code>