So erstellen Sie Medienabfragen in Responsive Web Design

In meinem letzten Beitrag zu Responsive Web Design (RWD) stellte ich vor, was RWD ist, demonstrierte flüssige Gitter und erklärte, wie die Konvertierung vom traditionellen Stil fester Pixel und Prozentsätze in Proportionen mithilfe der Marcotte-Berechnung durchgeführt werden kann: Ziel ÷ Kontext = Ergebnis . Abbildung A links zeigt eine Webseite aus Chris Coyiers CSS-Tricks, wie sie in einem simulierten iPhone-Test mit einer Gerätebildschirmauflösung von 320 x 480 angezeigt wird.

Ethan Marcottes Beiträge zu Responsive Web Design und sein neues Buch Responsive Web Design haben die RWD-Bewegung angeführt.

In diesem Beitrag werde ich untersuchen, wie sich Medientypen mit RWD zu Medienabfragen entwickeln.

Medien-Anfragen

Medienabfragen gehen über die herkömmlichen Medientypen hinaus, die seit CSS 2.1 verwendet wurden. Dadurch konnten unsere Websites ein gewisses Maß an Reaktionsfähigkeit der Mediengeräte erreichen. Sehen Sie sich beispielsweise die Beispielelemente für externe Stylesheet-Links an, die das Medienattribut verwenden, mit Verweisen wie media = "screen" oder media = "print" unten.

Die W3C-Antwort zur Verbesserung der gerätespezifischen Website-Antwort ist die Spezifikation für Medienabfragen. Medienabfragen eröffnen das Spektrum der Möglichkeiten mit dem Attribut "Medien", das steuert, wie die Stile angewendet werden. Medienabfragen bringen das vorherige Schema auf die nächste Ebene, indem wir Stile basierend auf einer Reihe von Geräteeigenschaften wie Bildschirmbreite, Ausrichtung, Auflösung und anderen Zielen auswählen können. Mithilfe von Medienabfragen können wir nicht nur bestimmte Geräte und Geräteklassen ansprechen, sondern auch die physikalischen Eigenschaften des Geräts überprüfen.

Angenommen, wir möchten auf iPhones, Android und solche Geräte abzielen, die normalerweise eine maximale Bildschirmauflösung von 480 Pixel horizontal haben. Wir würden die Medienabfrage einrichten, indem wir zwei Komponenten anwenden: erstens den Medientyp gleich Bildschirm und zweitens die tatsächliche Abfrage, die in Klammern eingeschlossen ist und die zu untersuchende Medienfunktion und den Zielwert enthält.

Die obige Abfrage wendet dieses Stylesheet nur auf ein Gerät mit Bildschirm an und nur dann, wenn das Browserfenster auf diesem Gerät eine horizontale Auflösung von nicht mehr als 480 Pixel hat. Andernfalls wird der Link ignoriert. Sie können dem Dateinamen mobile.css entnehmen, dass diese spezielle Abfrage für mobile Gerätestile bestimmt ist.

Um noch einen Schritt weiter zu gehen, schauen wir uns eine weitere Beispiel-Medienabfrage von The Goldilocks Approach to Responsive Web Design an. In seinem Beispiel für das sogenannte "geräteunabhängige" universelle Webdesign wird der folgende Link verwendet:

 Beachten Sie im obigen Goldilocks-Beispiel, dass die Mindestbreite in ems dargestellt wird, und der Kommentar zum Eliminieren eines möglichen horizontalen Bildlaufs ergibt sich aus dem Ansatz, dass 30em im Allgemeinen den Trick in Bezug auf Geräte ausführt, die möglicherweise zu klein (schmal) sind Spalte), genau richtig (einzelne Spalte) oder zu groß (mehrspaltig); erinnere dich an "Goldlöckchen und die drei Bären". Sie können die Goldilocks Approach Demo mit aktiviertem oder deaktiviertem Raster anzeigen. In Abbildung B ist es eingeschaltet. 

Abbildung B.

Wir können auch mehrere Eigenschaftswerte in Medienabfragen integrieren, indem wir sie mit dem Schlüsselwort "und" verketten, wie im folgenden Beispiellink:

Demonstrieren von Medienabfragen

Wir können auch Medienabfragen in unsere Stylesheets aufnehmen. Kehren wir also zu den Demonstrationsdateien (siehe Download unten) zurück, die ich im ersten Segment verwendet habe, und integrieren Sie die unten gezeigte Medienabfrage:

 @ Media-Bildschirm und (maximale Breite: 480 Pixel) { 
 #blog_rwd { 
 float: keine; 
 Breite: 60, 714285714285714285714285714286%; 
 Hintergrundfarbe: # FFB3B3; 
 }} 
 }} 
In diesem Fall setzt das Gerät, sollte es den Test mit einem Bildschirm und einer maximalen Breite von 480 Pixel bestehen, das # blog_rwd auf einen Gleitkommawert von none und eine Breite von 60, 714285714285714285714285714286%, was aus Marcottes Berechnung der Zielbreite abgeleitet wird ( 1020px) des Elements geteilt durch den Kontext, dh die native maximale Breite des angenommenen Containers (1680px). Das Ergebnis wird mit 100 multipliziert, um den obigen Prozentsatz zu erhalten. Beachten Sie außerdem, dass die Hintergrundfarbe für den Blog-Header-Bereich auch die Farben ändert, wenn Sie die Größe des Bildschirmanzeigebereichs auf unter 480 Pixel ändern. Dies dient zu Demonstrationszwecken, um zu zeigen, dass die Medienabfrage nur aktiviert wurde, wenn die maximale Breite des Browsers geändert wurde und der Test wahr ist. Die resultierende Ausgabe, wie sie im simulierten iPhone angezeigt wird, ist in Abbildung C dargestellt :

Abbildung C.

Beachten Sie jedoch, dass der Seitencontainer links den Text nicht zu gut umschließt. Um dies zu beheben, fügen wir eine weitere Medienabfrage hinzu, um die Seite unter dem Artikelcontainer abzulegen, und fügen dann eine weitere Medienabfrage hinzu, um die Breite beider Container zu erweitern. Die beiden Medienabfragen werden unten angezeigt:

 @ Media-Bildschirm und (maximale Breite: 830px) { 
 #blog_rwd .aside_rwd { 
 float: left; 
 Breite: 98%; 
 Hintergrundfarbe: # 95C9E8; 
 Rand oben: 5px; 
 }} 
 }} 
 @ Media-Bildschirm und (maximale Breite: 830px) { 
 #blog_rwd .article_rwd { 
 float: left; 
 Breite: 98%; 
 Hintergrundfarbe: # B0E6C6; 
 Rand oben: 10px; 
 }} 
 }} 

Der ursprüngliche Stil für den Artikelcontainer enthielt ein Float-Recht (siehe Code-Snippet unten).

 #blog_rwd .article_rwd { 
 Breite: 78, 431372549019607843137254901961%; 
 schweben rechts; 
 Polsterung rechts: 0, 49019607843137254901960784313725%; 
 Hintergrundfarbe: # E3FDF8; 
 }} 

Wenn der sichtbare Bereich des Browsers jedoch 830px oder weniger beträgt, wird die Medienabfrage aktiviert und der Artikelcontainer wird nach links verschoben. Die Größe wird auf 98% geändert, und die Hintergrundfarbe ändert sich für die Demo in einen grünen Farbton von # B0E6C6. Dies drückt es im Wesentlichen über den Seitenbehälter. Der Seitenbehälter schwebt mit einer Breite von 98% nach links, und die Hintergrundfarbe ändert sich zu Demonstrationszwecken in einen blauen Farbton von # 95C9E8.

Die Demoseite wird in Chrome 20.0 mit einem geänderten Bildschirmbereich von 825 Pixel in Abbildung D unten angezeigt.

Abbildung D.

In der iPhone-Simulation wird dieselbe Demoseite angezeigt wie in Abbildung E :

Abbildung E.

Eine weitere Optimierung, die wir vornehmen können, besteht darin, die Fläche des Blog-Bereichs zu erweitern, damit mehr Text und Inhalt auf den Bildschirmen angezeigt werden können. Wenn Sie die Berechnung erneut verwenden, können Sie einen größeren Prozentsatz für die Breite anwenden und ihn von der vorherigen Einstellung von 60, 714 ...% auf 92, 431372549019607843137254901961% erhöhen. Das Medienabfrage-Snippet wird unten angezeigt.

 @ Media-Bildschirm und (maximale Breite: 480 Pixel) { 
 #blog_rwd { 
 float: keine; 
 Breite: 92, 431372549019607843137254901961%; 
 Hintergrundfarbe: # FFB3B3; 
 }} 
 }} 
Wir haben jetzt eine verbesserte RWD, wie sie in der iPhone-Simulation in Abbildung F dargestellt ist :

Abbildung F.

Funktionen für Medienabfragen

In der folgenden Tabelle sind die Medienabfragefunktionen, die zugehörigen Werte, die zulässigen Min / Max-Werte und eine kurze Beschreibung aufgeführt. Die ersten fünf Merkmale in der Tabelle, nämlich Breite, Höhe, Gerätebreite, Gerätehöhe und Ausrichtung, sind am nützlichsten und werden am häufigsten verwendet. Sie können den meisten Funktionen "min-" und "max-" voranstellen, um minimale und maximale Werte anzugeben, z. B. "min-width" und "max-width". Die Spalte Min / Max in der Tabelle gibt an, welche Funktionen auf diese Weise geändert werden können.

FeatureWertMinimal MaximalBeschreibung
widthLängeJaBreite des Anzeigebereichs
heightLängeJaHöhe der Anzeigefläche
device-widthLängeJaBreite des Geräts
device-heightLängeJaHöhe des Geräts
orientationportrait oder landscapeNeinAusrichtung des Geräts
aspect-ratioVerhältnis (w / h)JaVerhältnis von Breite zu Höhe, ausgedrückt als zwei durch einen Schrägstrich getrennte ganze Zahlen (z. B. 16/9)
device-aspect-ratioVerhältnis (w / h)JaVerhältnis von Gerätebreite zu Gerätehöhe
colorGanze ZahlJaAnzahl der Bits pro Farbkomponente (wenn nicht Farbe, ist der Wert 0)
color-indexGanze ZahlJaAnzahl der Einträge in der Farbnachschlagetabelle des Ausgabegeräts
monochromeGanze ZahlJaAnzahl der Bits pro Pixel im monochromen Bildpuffer (wenn nicht monochrom, ist der Wert 0)
resolutionAuflösungJaDichte der Pixel des Ausgabegeräts, dpcm als Ganzzahl, gefolgt von dpi (Punkte pro Zoll) oder dpcm (Punkte pro Zentimeter)
scanProgressive oder interlaceNeinScanvorgang für Fernsehgeräte
grid0 oder 1NeinBei der Einstellung 1 ist das Gerät gitterbasiert, z. B. ein Teletyp-Terminal oder eine Telefonanzeige mit nur einer festen Schriftart (alle anderen Geräte sind 0).

Im nächsten Beitrag zum Thema RWD wird erläutert, wie Sie Ihre Bilder und andere Multimedia-Inhalte flexibel gestalten können, damit sie im Verhältnis zur Auflösung und zum Gerät an jeden Bildschirm angepasst werden können.

Die für die Demonstration in diesem Teil verwendeten Dateien können hier heruntergeladen werden.

© Copyright 2021 | mobilegn.com