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

Inhalt

• 01. Medienabfragen hinzufügen
• 02. Anatomie einer Medienabfrage
• 03. Noch etwas…
• 04. Haltepunkte auswählen
• 05. Anpassen unserer Thumbnails
• 06. Nicht nur Breite

• Erforderliche Kenntnisse: Fortgeschrittenes CSS und HTML
• 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 einzubeziehen, 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

Da 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. Anhand des Desktop-orientierten Designs können wir erkennen, dass unser Layout in breiteren Ansichtsfenstern wie folgt aussehen sollte:

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

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

Wie wir im zweiten Teil dieses Tutorials erfahren haben, verwenden wir 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 Bildschirm zum größten 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 wird nur wirksam, wenn der Browser breiter als 768px ist, können wir das folgende CSS hinzufügen:

.document {
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 768px 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 Medien Attribut auf der Link> Element. Dies liegt daran, dass beide die genehmigten Medientypen akzeptieren, die in der CSS 2.1-Spezifikation enthalten sind.
• (Mindestbreite: 768px): Der zweite Teil ist der Abfrage. Dies beinhaltet die Feature 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: Diese ermöglichen es uns, die Breite der gesamten Anzeige abzufragen. 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 hat letztes Jahr einen wunderbaren Artikel geschrieben, in dem untersucht wurde, 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 undkönnen wir in einer Abfrage auf mehrere Funktionen testen. Beispielsweise:

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

Wie Sie sehen können, können uns Medienabfragen dabei helfen, ziemlich überzeugende Erfahrungen zu sammeln - und ich habe nur die Oberfläche berührt. Wenn Sie nach einer leichten Lesung vor dem Schlafengehen suchen, können Sie es schlechter machen, als die W3C-Spezifikation für Medienabfragen zu lesen, in der alle Funktionen beschrieben sind, 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.

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

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 aufgenommen, um dieses Verhalten zu umgehen, und da es von anderen Herstellern übernommen wurde, ist es fast zu einem geworden de facto Standard. Es geht einfach darum, eine einzelne hinzuzufügen Meta Element zu unserem Markup:

meta name = "viewport" content = "initial-scale = 1.0, width = device-width" />

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:

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, habe ich im zweiten Teil gesagt, 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 ist.

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. Erst als ich sah, dass Jeremy Keith em-basierte Medienabfragen demonstrierte, wurde mir klar, wie mächtig sie sein konnten.

Während unser Design einige Hinweise auf mögliche Haltepunkte liefert, ist der beste Weg, diese auszuwählen, häufig 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-Bildschirm und (Mindestbreite: 50 em) {/ * 800px * /
...
}

05. Anpassen unserer Thumbnails

Sie werden sich daran erinnern, dass wir in Teil 2 unsere Miniaturansichten so gestaltet haben, dass sie reagieren. Sobald die Bilder in diesen Miniaturansichten ihre volle Breite erreicht haben, wird rechts von jedem Bild ein weißer Bereich angezeigt. Auch hier ermöglichen uns Medienabfragen, 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, 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.

• Sehen Sie sich unsere reaktionsschnelle Homepage an
• Sehen Sie sich unsere Responsive Media Item-Seite an

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

Morgen: Im letzten Teil dieses Tutorials gehen wir über das reaktionsschnelle Webdesign hinaus und untersuchen, wie wir wirklich reaktionsschnelle Websites erstellen können.

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