Responsive Webdesign – Grundlagen

Media Queries durchleuchtet

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Wie sind Media Queries genau aufgebaut? Was für Eigenschaften lassen sich abfragen? Damit beschäftigt sich dieser Film.

Transkript

Wie aber sind Media Queries genau aufgebaut? Was für Eigenschaften lassen sich abfragen? Damit beschäftigen wir uns in diesem Film. Sehen wir uns nochmal an, an welchen Positionen wir an sich diese Media Queries angeben können. Da gibt es drei Positionen. Wir können die zum einen hinschreiben bei einer @media-Regel. Wir können sie zum anderen angeben bei einem verlinkten Style Sheet hinter media. Und wir könnten sie auch bei @import schreiben. Entscheidend, dass was uns jetzt interessiert, ist der Ausdruck screen and (min-width: 540 px) zum Beispiel. Also, wie ist so etwas aufgebaut? An erster Stelle steht der Medientyp, das ist im Beispiel Screen. Was für andere Möglichkeiten habe ich hier? Hier sehen Sie, was alles an sich denkbar ist. Am wichtigsten ist natürlich hier Screen für den Bildschirm. Es gibt natürlich auch, genau wie in CSS 2.1 - Print für Drucker. Es gibt Braille für Braillezeile. Es gibt Handheld für Handheld-Gerät. Aber Achtung: Smartphones lesen das nicht, sondern die lesen Screen. Es gibt Projection für den Projektor. Es gibt Terminal, Fernseher, Brailledrucker, Sprachbrowser und All. Wenn wir aber ein Responsive Web Layout erstellen und uns damit befassen, dann ist Screen das Entscheidende. Wir hatten ja eben gesehen in diesem Ausdruck: es gibt auch immer ein "And". Und dieses "And" verknüpft jetzt verschiedene Bedingungen. Wenn wir so einen Ausdruck haben, wie @"media screen and (max-width), zum Beispiel 600 Pixel, dann werden die Formatierungen, die in geschweiften Klammern angegeben sind, dann angewandt, wenn es sich um ein Bildschirm (Screen) handelt And (und), der bestimmte Eigenschaften hat. Also, dieses And verknüpft verschiedene Eigenschaften. Und diese abgefragten Eigenschaften, die stehen dann hier so in runden Klammern. Ich kann aber auch... Das sehen Sie in folgenden Beispielen. ...auf diese Art jetzt mehrere Eigenschaften abfragen. Durch diese Angabe hier wähle ich jetzt Geräte aus, die eine Mindestgerätebreite von 367 Pixeln haben und gleichzeitig eine maximale Gerätebreite von 972 Pixeln. Dieses And hat natürlich was zu tun mit logischen Operatoren und es muss natürlich dann auch ein Oder geben. Und das ist ja jetzt ein Fall von Und. Das And und ein Oder gibt es auch. Das wird aber nicht explizit gesetzt, sondern durch ein Komma, so wie Sie das auch schon sonst in CSS kennen. Und das bedeutet einfach, wenn Sie jetzt in Media Queries so ein Komma angeben, dass nicht beide Angaben gleichzeitig erfüllt sein müssen. Also, hier wieder ein kleines Beispiel: @media screen and (max-device-width: 480 px). Dann gilt das, was danach steht, zum einen, für diese Geräte, zum anderen, screen and (max-width:600 px) für Geräte, die die andere Bedingung erfüllen. Aber es ist jetzt nicht gesagt, dass die Geräte beides erfüllen müssen. Jetzt gibt es noch ein kleines Schlüsselwort, was ganz praktisch ist. Und dafür sehen Sie jetzt ein weiteres Beispiel. Das ist das Schlüsselwort Only. Das können Sie ergänzen vor dem Gerät, um das es geht. Hier haben wir das Beispiel @media only screen. Und dieses Only hat normalerweise keine Auswirkung. Es bedeutet nur, dass Browser die Media Queries an sich nicht interpretieren können, auch gar nicht anfangen die Regeln zu lesen. Die werden sonst das einfach ganz normal ausführen, unabhängig davon, ob die Angaben auf sie zutreffen oder nicht. Und durch dieses Schlüsselwort Only können wir das verhindern. Also, das ist das, was das Only macht. Es verhindert die Interpretation durch Browser, die nicht damit umgehen können, mit Media Queries. In den bisherigen Beispielen haben wir mit Width und Device Width gearbeitet. Stellt sich ja aber natürlich die Frage: Was für abfragbare Eigenschaften gibt es denn prinzipiell? Am häufigsten werden Sie sicher mit Width arbeiten, was wir auch gemacht haben. Das ist die Breite des Viewports. Beim Desktop-Browser beispielsweise die Breite des Browser-Fensters. Entsprechend Height, die Höhe des Viewports. Es gibt auch Device-Width, das ist die Breite des Ausgabegeräts. Beim Desktop-Browser wäre es wirklich die physikalische Breite des Monitors. Und entsprechend gibt es Device-Height. Ebenfalls nützlich ist Orientation. Damit können Sie die Ausrichtung ablesen. Mögliche Werte sind Portrait und Landscape. Weitere Eigenschaften sind jetzt beispielsweise hier. Aspect-Ratio - das Verhältnis zwischen Width und Height. Entsprechend gibt es das auch für die Geräteeigenschaft. Color ist die Anzahl der Bits pro Farbe. Color-Index ist die Anzahl der Einträge in der Color Lookup Table (Tabelle). Und es gibt weitere, wie hier: Monochrome - wenn es ein monochromes Gerät ist, wie viel Anzahl der Bits pro Pixel es gibt. Und wichtig jetzt noch die Angabe Resolution. Das ist die Dichte der Pixel, zum Beispiel min-resolution. Kann man damit sehen, ob es ein hochauflösendes Display ist. Und das ist praktisch angesichts von Retina und Konsorten. Grid ist ein weiterer Wert. Was müssen Sie sich aber jetzt alles merken von dem Aufbau von Media Queries? Einmal ist wichtig, dass Sie wissen, wie die Syntax an sich funktioniert. Dass Sie solche Angaben haben, wie screen and und dann in Klammern, zum Beispiel die Abfrage nach den Eigenschaften. Von den ganzen Eigenschaften, die an sich möglich sind, werden Sie die meisten nicht brauchen. Hingegen nützlich sind Width, Height, Device-Width, Device-Height, Orientation*und Resolution, wobei aber Width das am häufigsten verwendete ist. Ebenfalls nützlich ist, wenn Sie sich merken, dass Sie mit OnlyMedia Query-Angaben vor älteren Browsern verstecken können.

Responsive Webdesign – Grundlagen

Lernen Sie die Hintergründe von Responsive Webdesign kennen und sehen Sie, wie sich über diese Technik Webinhalte auf den unterschiedlichsten Geräten gleichwertig anzeigen lassen.

5 Std. 47 min (59 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!