Sie wissen bereits, wie Sie mithilfe von Medienabfragen ein responsives Design erstellen können, aber haben Sie versucht, sie für andere Zwecke zu verwenden? Ist es möglich, dass Medienabfragen nativ verwendet werden können, um Ihren Workflow zu verbessern?
Folgen Sie uns, während wir völlig von traditionellen Abfragen brechen und Medienfragen abfangen, damit wir ein Design testen und optimieren können. Sie haben noch nie solche Medienanfragen gesehen!
Über Responsive Design hinaus
Mit dem Aufkommen responsiver Designtechniken sind Medienanfragen als Retter des modernen Webdesigns in den Vordergrund gerückt. Sie bieten eine unglaublich einfache und praktische Methode zum Erstellen einer Site, die über eine Vielzahl von Bildschirm- und Browserfenstergrößen funktioniert.
Neben der Verwendung von Medienabfragen in meinem Endprodukt, um eine bessere Benutzererfahrung zu bieten, kann ich Medienabfragen in einer lokalen Testumgebung möglicherweise verwenden, um bei einigen grundlegenden Aufgaben zu helfen.Das ist alles schön, aber ich wollte die Dinge ein bisschen aufmischen. Ich fing an, mir eine interessante Frage zu stellen: Wofür kann ich Medienanfragen noch verwenden?
Diese Frage führt zu einem interessanten Brainstorming. Hier haben wir eine Technologie, die es mir ermöglicht, mein CSS im Wesentlichen auf eine boolsche Art und Weise zu ändern: Wenn mein Browserfenster x-Größe hat, dann y. Dies erinnert sofort an die Auswirkungen auf die Verbesserung meines Workflows. Abgesehen von der Verwendung von Medienabfragen in meinem Endprodukt, um eine bessere Benutzererfahrung zu bieten, kann ich Medienabfragen in einer lokalen Testumgebung möglicherweise verwenden, um bei einigen grundlegenden Aufgaben zu helfen.
Laufen wir mit diesem Gedankengang und schauen wir uns an, was uns einfallen kann!
CSS debuggen und DOM visualisieren
CSS-Layout kann ein kniffliges Tier sein. Unabhängig davon, ob Sie ein brandneuer Entwickler oder ein erfahrener Veteran sind, kann es vorkommen, dass die Position von etwas in Ihrer Live-Vorschau nicht ganz Ihren Vorstellungen in Ihrem Code entspricht.
Unter diesen Umständen ist es wirklich hilfreich, in der Lage zu sein, das Geschehen im DOM zu visualisieren. Wenn Sie ein visuelles Bild der Beziehung zwischen Eltern und Kind / Geschwister zusammen mit einem anständigen Bild Ihrer Margen und Polsterung erhalten, werden Sie überrascht sein, auf wie viele Probleme Sie die Antwort sofort finden können.
Chris Page hat bereits 2006 eine Lösung veröffentlicht, die zu diesem Zweck sehr nützlich ist. Es verwendet den universellen Selektor, um farbige Konturen auf verschiedene Ebenen des DOM-Baums anzuwenden, sodass Sie leicht ein Gefühl für die Struktur des Inhalts erhalten können:
Ich nahm dieses Snippet und ging noch einen Schritt weiter, indem ich hilfreiche Hintergrundfarben hinzufügte und dann alles in eine Medienabfrage packte:
Wieso würdest du das machen?
Ich weiß, das scheint verrückt zu sein, aber es ist ziemlich nützlich. Wenn Sie das oben abgebildete Snippet zur Fehlerbehebung in CSS verwenden, kann es sehr schwierig sein, das CSS ein- und auszublenden, sodass Sie Ihr Layout so sehen können, wie es sein soll. Mit der Medienabfrage können Sie schnell und einfach zwischen den beiden Ansichten wechseln, indem Sie die Größe Ihres Browserfensters ändern.
Hier eine Beispielseite, wie sie normalerweise in voller Breite in meinem Browser angezeigt wird:
Wenn ich nun die Seite des Browserfensters ein wenig ziehe, sehe ich meine Layout-Helfer. Beachten Sie, dass die Hintergrundfarbe dunkler wird, wenn wir tiefer in das DOM hineinkommen.
Jetzt kann ich meinen Code anpassen, während ich die Ergebnisse im Debug-Modus sehe, und dann mit einem schnellen Ziehen des Fensters in meine normale Ansicht springen.
Sehen Sie es in Aktion
Nun, da wir den Code gesehen haben, ist es Zeit, die Demo zu starten. Stellen Sie sicher, dass Sie die Größe des Browser-Fensters ändern und beobachten, wie die Debug-Helfer angezeigt werden, wenn Sie eine Breite von 1.100 Pixel haben.
Demo: Klicken Sie hier, um zu starten.
Muss auf einem Desktop oder Notebook angezeigt werden.
Optimieren Sie Ihr Design
Eine andere Möglichkeit, Medienabfragen zu verwenden, besteht darin, Entscheidungen zwischen subtilen Unterschieden in einem Design zu treffen. Angenommen, Sie sind mit der Strichhöhe Ihrer Körperkopie nicht ganz zufrieden und möchten einige Optionen ausprobieren. Sie können einige verschiedene Medienabfragen einrichten, die jeweils eine eigene Zeilenhöhe haben:
Wenn Sie nun Ihr Design im Browser betrachten, können Sie die verschiedenen Iterationen anzeigen, indem Sie Ihr Browserfenster in und aus dem Fenster ziehen. So können Sie die Optionen für die Zeilenhöhe schnell vergleichen und auswählen, welche Ihnen am besten gefällt.
Sie können dieselbe Technik für Hintergrundfarben, Schriftarten und alles, was Sie sich vorstellen können, anwenden.
Sehen Sie es in Aktion
Beobachten Sie dieses Mal, wenn Sie die Größe des Browsers ändern, wie sich dies auf die Zeilenhöhe auswirkt. Dies wäre definitiv ein guter Weg, um die drei Optionen schnell zu vergleichen.
Demo: Klicken Sie hier, um zu starten.
Muss auf einem Desktop oder Notebook angezeigt werden.
Vergleichen Sie das Browser-Design mit dem Photoshop-Modell
Wenn Sie häufig Websites aus Photoshop-Comps erstellen, ist es hilfreich, Ihre Live-Version mit dem Modell zu vergleichen, das Sie emulieren möchten.
Wieder einmal bietet eine Medienabfrage eine einfache Möglichkeit, zwischen den beiden Versionen zu wechseln. Hier habe ich alle meine Inhalte auf eine Deckkraft von 40% gesetzt, dann habe ich meinen ursprünglichen Comp als Hintergrund in den Körper eingefügt. Dies erzeugt eine Art Überlagerungseffekt, der mir hilft, größere Unterschiede zu erkennen.
Sehen Sie es in Aktion
Bei dieser letzten Demo wird die Größe eines Browsers die Deckkraft des gesamten Inhalts der Seite verringern und ein vollständiges Deckkraftbild des Photoshop-Modells anzeigen, sodass Sie die beiden vergleichen können.
Demo: Klicken Sie hier, um zu starten.
Muss auf einem Desktop oder Notebook angezeigt werden.
Fazit
Der Zweck dieses Artikels ist eher explorativ als pädagogisch. Es ist beabsichtigt, eine Diskussion darüber einzuleiten, ob Medienanfragen für andere Zwecke als Responsive Design geeignet sind oder nicht.
Alle drei meiner oben genannten Experimente sind auf lokale Designtests ausgerichtet, so dass wir uns nicht wirklich um Semantik, Browserkompatibilität und andere Probleme kümmern müssen, die normalerweise mit dieser Art von Konversation einhergehen. Stattdessen geht es darum, hilfreiche Tricks zu entwickeln, die Ihren persönlichen Workflow verbessern.
Fällt Ihnen etwas ein, das mit Medienanfragen lustig oder hilfreich ist? Teilen Sie uns Ihre Meinung im Kommentarbereich mit.