Erstellen Sie in einer Woche eine reaktionsfähige Site: Medienabfragen (Teil 4)

  • Erforderliche Kenntnisse: CSS und HTML für Fortgeschrittene
  • Benötigt: Texteditor, moderner Browser, Grafiksoftware
  • Projektzeit: 1 Stunde (insgesamt 5 Stunden)
  • Support-Datei

Als relativ neuer Teil der CSS-Spezifikation sind Medienabfragen zweifellos der aufregendste Aspekt des reaktionsschnellen Webdesigns und ein Bereich, der für weitere Experimente reif ist.

Einige haben die Notwendigkeit adaptiver Layouts akzeptiert und Medienabfragen als Mittel gesehen, um adaptive Layouts an vorhandenen Standorten mit fester Breite nachzurüsten. Unter denjenigen, die sich für reaktionsschnelle Layouts entschieden haben, haben viele dies aus der Sicht des Desktops getan und Inhalte und Funktionen ausgeblendet, wenn sich das Ansichtsfenster verengt.

In diesem Tutorial haben wir einen alternativen, mobilen Ansatz gewählt. Wenn wir nun versuchen, Medienabfragen aufzunehmen, können wir darüber nachdenken Hinzufügen Funktionen mit zunehmender Bildschirmfläche, sicher in dem Wissen, dass das Markup und Design, das unserer Website zugrunde liegt, eine respektable Basis bietet.



Heute werden wir über unser Musterportfolio hinausgehen und die einzelnen Seiten erstellen, die für unsere Website erforderlich sind. Auf diese Weise werden wir sehen, wie Medienabfragen erstellt werden, und sie auf eine wirklich reaktionsschnelle Weise implementieren.

01. Medienabfragen hinzufügen

Nachdem die Komponenten in unserem Musterportfolio vollständig sind und außerhalb der Grenzen eines Layouts arbeiten, ist es an der Zeit, sie auf die verschiedenen Seiten unserer Website zu verschieben.

Wir beginnen mit unserer Homepage. Aus dem Desktop-orientierten Design können wir ersehen, dass unser Layout in breiteren Ansichtsfenstern wie folgt aussehen sollte:

Unsere Homepage besteht aus einer Kopf-, Hauptnavigations- und Fußzeile, wobei der Inhaltsbereich in zwei Spalten unterteilt ist: Die Hauptspalte nimmt drei Viertel der Breite ein, während die ergänzende Spalte das verbleibende Viertel einnimmt

Unsere Homepage besteht aus einer Kopf-, Hauptnavigations- und Fußzeile, wobei der Inhaltsbereich in zwei Spalten unterteilt ist: Die Hauptspalte nimmt drei Viertel der Breite ein, während die ergänzende Spalte das verbleibende Viertel einnimmt

Ausgehend von unseren Entwürfen können wir den Dokumentbereich in CSS wie folgt beschreiben:

.dokument {
Polsterung: 0 5%;
}}
.main {
Breite: 74,242424242424%; / * 784/1056 * /
float: left;
}}
.komplementär {
Breite: 22,727272727273%; / * 240/1056 * /
schweben rechts;
}}

Wie wir in gelernt haben der zweite Teil dieses Tutorials Wir verwenden die folgende Formel, um die prozentuale Breite dieser Spalten zu berechnen:

(Ziel / Kontext) * 100 = Ergebnis

Wenn wir die Größe unseres Browsers ändern, werden wir feststellen, dass unser Desktop-Layout vom kleinsten zum größten Bildschirm skaliert. Bei kleinen Größen sind die Spalten natürlich zu schmal und die Zeilenlängen so kurz, dass der Inhalt schwer zu lesen ist. Wir möchten dieses Layout nur, wenn genügend Speicherplatz verfügbar ist, damit es funktioniert.

Hier kommen Medienabfragen ins Spiel. Angenommen, dieses Layout sollte nur wirksam werden, wenn der Browser breiter als 768px ist, können wir das folgende CSS hinzufügen:

.dokument {
Polsterung: 0 5%;
}}
@ Media-Bildschirm und (Mindestbreite: 768 Pixel) {
.main {
Breite: 74,242424242424%; / * 784/1056 * /
float: left;
}}
.komplementär {
Breite: 22,727272727273%; / * 240/1056 * /
schweben rechts;
}}
}}

Wenn das Ansichtsfenster jetzt schmaler als 768 Pixel ist, wird alles in der Medienabfrage ignoriert. Es wird von jedem Browser ignoriert, der auch keine Medienabfragen unterstützt.

02. Anatomie einer Medienabfrage

Um zu verstehen, was hier passiert, schauen wir uns an, wie eine Medienabfrage aufgebaut ist. Wir können es in zwei Teile teilen:

  • @ Media Bildschirm: Der erste Teil einer Medienabfrage ist der Medientyp . Sie können diese Syntax erkennen, wenn Sie jemals Druckstile in Ihr CSS aufgenommen haben. Sie können den Typnamen auch an der erkennen Hälfte Attribut auf der Element. Das liegt daran, dass beide das akzeptieren genehmigter Satz von Medientypen in der CSS 2.1-Spezifikation gefunden.
  • (Mindestbreite: 768px): Der zweite Teil ist der Abfrage . Dies beinhaltet die Merkmal abgefragt werden (in diesem Fall die Mindestbreite des Ansichtsfensters) und die entsprechende Wert zu testen für (768px).

Wenn wir über responsives Webdesign sprechen, besteht die Tendenz, sich auf die Breite zu konzentrieren, aber es gibt auch andere Funktionen, auf die wir testen können:

  • (min- | max-) Breite und (min- | max-) Höhe: Mit diesen können wir die Breite und Höhe des Ansichtsfensters (d. H. Des Browserfensters) abfragen.
  • (min- | max-) Gerätebreite und (min- | max-) Gerätehöhe: Damit können wir die Breite der gesamten Anzeige abfragen. Nach meiner Erfahrung ist es normalerweise sinnvoller, Layouts auf dem Ansichtsfenster als auf dem Display zu basieren.
  • Orientierung: Hier können Sie sofort an die Möglichkeiten denken; Denken Sie an Apps, die je nach Ausrichtung Ihres Telefons unterschiedliche Inhalte anzeigen - dasselbe ist im Web möglich.
  • (min- | max-) Seitenverhältnis: Dies ermöglicht es uns, Layouts basierend auf dem Verhältnis des Browserfensters anzupassen…
  • (min- | max-) Geräteseitenverhältnis: … Und dies ermöglicht es uns, dasselbe basierend auf dem Seitenverhältnis des Geräts zu tun. Owen Gregory schrieb ein wunderbarer Artikel Letztes Jahr wurde untersucht, wie wir diese Abfrage verwenden können, um unsere Designs mit den Geräten zu verknüpfen, auf denen sie angezeigt werden.
  • (min- | max-) monochrom: Wir können auch testen, ob ein Gerät ein monochromes Display hat oder nicht. Stellen Sie sich vor, wie nützlich dies wäre, wenn die E-Ink-Kindle-Geräte von Amazon nicht lügen und ihre Bildschirme als Farbe melden würden!

Der letzte Teil unserer Anfrage ist möglicherweise der nützlichste. Durch die Nutzung und können wir in einer Abfrage auf mehrere Funktionen testen. Zum Beispiel:

@ Media-Bildschirm und (Mindestbreite: 768 Pixel) und (Ausrichtung: Querformat) {
...
}}

Wie Sie sehen, können uns Medienabfragen dabei helfen, ziemlich überzeugende Erfahrungen zu sammeln - und ich habe nur die Oberfläche berührt. Wenn Sie auf der Suche nach einer leichten Lesung vor dem Schlafengehen sind, könnten Sie es schlechter machen als zu Lesen Sie die W3C-Medienabfragespezifikation Hier werden alle Funktionen beschrieben, auf die wir testen können.

03. Noch etwas…

Obwohl wir Medienabfragen in unser CSS aufgenommen haben, werden Sie beim Anzeigen unserer Website auf einem mobilen Gerät feststellen, dass unsere Website immer noch so gerendert wird, als ob die Anzeige breiter als 768 Pixel wäre.

Unsere Website reagiert noch nicht, obwohl wir Medienabfragen hinzugefügt haben

Unsere Website reagiert noch nicht, obwohl wir Medienabfragen hinzugefügt haben

Um zu verstehen, warum dies geschieht, müssen wir eine kurze Geschichtsstunde machen.

Als das ursprüngliche iPhone 2007 angekündigt wurde, war eines seiner großen Verkaufsargumente die Möglichkeit, im „echten Web“ zu surfen, auch wenn dies Desktop-orientierte Websites mit fester Breite bedeutete, die zusammengedrückt werden mussten, um auf den kleinen Bildschirm zu passen. Das iPhone konnte dies tun, indem es seine Anzeige als 980 Pixel breit meldete, bevor die Webseiten auf den 320 Pixel breiten Bildschirm verkleinert wurden.

Das iPhone wurde jedoch vor dem Aufkommen des Responsive Design eingeführt. Da Autoren Websites für Mobilgeräte entwerfen, ist diese Funktion weniger nützlich. Zum Glück hat Apple ein Mittel zur Umgehung dieses Verhaltens aufgenommen. Seitdem es von anderen Herstellern übernommen wurde, ist es fast zu einem Problem geworden de facto Standard. Es geht einfach darum, eine einzelne hinzuzufügen Meta Element zu unserem Markup:

iphone 11 pro vs iphone 8 plus

Dies teilt Viewport-fähigen Browsern mit, dass eine Website nicht verkleinert werden sollte und dass die Breite des Browserfensters genauso behandelt werden sollte wie die Gesamtbreite des Geräts. Sobald wir diese Zeile hinzugefügt haben, wird unsere Website mit dem beabsichtigten Layout angezeigt:

Das richtige Layout wird angezeigt, sobald wir das Ansichtsfenster-Metaelement hinzugefügt haben

Das richtige Layout wird angezeigt, sobald wir das Ansichtsfenster-Metaelement hinzugefügt haben

04. Haltepunkte auswählen

Kehren wir zu unserer Medienabfrage zurück:

@ Media-Bildschirm und (Mindestbreite: 768 Pixel) {
...
}}

Werte, bei denen sich ein Layout anpasst, werden üblicherweise als Haltepunkte bezeichnet. Wenn Sie sich erinnern, in Zweiter Teil Ich sagte, dass die Verwendung von Pixeln ein Hinweis auf nicht reagierendes Denken ist, aber hier habe ich 768px gewählt, wahrscheinlich weil es die Breite eines vertrauten Geräts hat.

Anstatt Haltepunkte basierend auf den Eigenschaften gängiger Geräte auszuwählen, kann es effektiver sein, aus unserem Inhalt abgeleitete Werte zu betrachten, z. B. komfortable Zeilenlängen zum Lesen oder die maximale Größe eines Bildes.

Da unser Typ mit ems dimensioniert wird, erscheint es für unsere Medienabfragen sinnvoll, auch ems zu verwenden. In der Tat hat dies einen zusätzlichen Vorteil. Wenn ein Benutzer die Größe von Text im Browser ändert, werden die Seiten angepasst, um kleinere Haltepunkte zu verwenden. Unsere Website wird nicht nur an die Größe des Ansichtsfensters angepasst, sondern auch an die Größe der Schriftart. In der Tat war es nur, als ich sah Jeremy Keith Demonstrieren Sie em-basierte Medienabfragen, bei denen mir klar wurde, wie leistungsfähig sie sein können.

coole Dinge mit Microsoft Surface Pro zu tun

Während unser Design einige Hinweise auf mögliche Haltepunkte liefert, ist die Auswahl am besten oft das Experimentieren. Durch Anpassen der Breite des Browserfensters habe ich entschieden, dass 800px eine gute Breite ist, um zu einem komplexeren Layout zu wechseln.

Wie drücken wir 800px in ems aus? Auch hier können wir unsere Formel verwenden, aber wie ist der Kontext? Bei der Berechnung von ems für Medienabfragen ist der Kontext immer die Standardschriftgröße des Browsers unabhängig davon, ob dieser Wert in Ihrem CSS überschrieben wurde . Diese Standardeinstellung ist normalerweise 16px, was uns Folgendes gibt:

800/16 = 50

Wir können unsere Medienabfrage jetzt folgendermaßen aktualisieren:

@media screen und (min-width: 50em) {/ * 800px * /
...
}}

05. Anpassen unserer Thumbnails

Sie werden sich daran erinnern Teil 2 Wir haben unsere Thumbnails so gestaltet, dass sie reagieren. Sobald die Bilder in diesen Miniaturansichten ihre volle Breite erreicht haben, wird rechts von jedem Bild ein weißer Bereich angezeigt. Medienabfragen ermöglichen es uns wiederum, dies zu beheben.

Hier ist unser Original-CSS:

ol.media li.media-item {
Hintergrundfarbe: #fff;
Marge: 0 4,16666666667% 4,16666666667% 0;
Breite: 47,91666666667%;
float: left;
}}
ol.media li.media-item: n-tes Kind (2n) {
Rand rechts: 0;
}}

Der Punkt, an dem dieser Leerraum angezeigt wird, ist genau dann, wenn der Browser breiter als der 560px wird. Wir wählen diesen Wert aus, bei dem drei Miniaturansichten pro Zeile angezeigt werden sollen. Wir können dies tun, indem wir das folgende CSS hinzufügen:

@media screen und (min-width: 35em) {
.media-item {
Breite: 30,612244897959%; / * 240/784 * /
Marge: 0 4,081632653061% 1,1429em 0; / * 0 32/784 16px 0 * /
}}
.media-item: n-tes Kind (3n) {
Rand rechts: 0;
}}
}}

Beachten Sie, dass wir nicht alle für das Miniaturbild in dieser Medienabfrage erforderlichen Stile neu schreiben müssen, sondern nur die Teile, die wir anpassen möchten.

Wenn Sie diese Änderung im Browser anzeigen, werden Sie feststellen, dass rechts von jeder zweiten Miniaturansicht kein Rand vorhanden ist. Dies liegt daran, dass die folgende CSS-Regel weiterhin aktiv ist:

ol.media li.media-item: n-tes Kind (2n) {
Rand rechts: 0;
}}

Wir müssen das CSS in unserer Medienabfrage ändern, um diesen Wert zurückzusetzen:

@media screen und (min-width: 35em) {
.media-item {
Breite: 30,612244897959%; / * 240/784 * /
Marge: 0 4,081632653061% 1,1429em 0; / * 0 32/784 16px 0 * /
}}
.media-item: n-tes Kind (2n) {
Rand rechts: 4,081632653061%;
}}
.media-item: n-tes Kind (3n) {
Rand rechts: 0;
}}
}}

Beachten Sie beim Erstellen von Medienabfragen immer solche Vererbungsprobleme.

06. Nicht nur Breite

Es ist wichtig, Medienabfragen nicht nur in Bezug auf die Breite, sondern auch in Bezug auf andere Variablen zu berücksichtigen. Beispielsweise wird das Video auf unserer Seite mit Medienelementen teilweise ausgeblendet, wenn die Höhe des Ansichtsfensters abnimmt. Wir haben die Technologie:

.media-object-wrapper {
Polsterboden: 56,25%;
Breite: 100%;
Höhe: 0;
Position: relativ;
}}
@media screen und (max-height: 35em) und (Ausrichtung: Querformat) {/ * 560px * /
.media-object-wrapper {
Breite: 60%;
Polsterboden: 33,75%;
}}
}}

Ich habe sogar eine Orientierungsabfrage eingefügt, um dieses Verhalten weiter zu verfeinern.

Wir können einen ähnlichen Ansatz für die anderen Teile unseres Designs verfolgen, indem wir eine größere Version des Headers austauschen und die Navigationslinks an den oberen Rand der Seite verschieben, sobald Platz verfügbar ist.

Und da haben wir es! Wir haben eine reaktionsschnelle Website erstellt - und haben noch einen Tag Zeit! Nicht ganz. Flexible Layouts, Bilder und Medienabfragen sind nur der Anfang des reaktionsschnellen Designprozesses.

Morgen: Im letzten Teil dieses Tutorials Wir werden über reaktionsschnelles Webdesign hinausgehen und untersuchen, wie wir wirklich reaktionsschnelle Websites erstellen können.

Paul ist ein Interaktionsdesigner mit Sitz in Brighton, England. Er ist am glücklichsten, wenn er einfache, aber ansprechende Schnittstellen erstellt, die für das Web typisch sind.