Share
Medienanfragen sind ein wesentlicher Bestandteil modernen Webdesigns, sie sind jedoch nicht immer perfekt. In diesem Artikel betrachten wir die Idee von "Elementabfragen". Was viele argumentieren, ist die Zukunft des responsiven Webdesigns.
Ethans Artikel über Responsive Web Design veränderte die Art und Weise, wie wir Websites erstellen, für immer. Sein Artikel inspirierte und wurde schnell von Webdesignern und -entwicklern angenommen. Es sind Ansätze wie „Mobile First“, „Desktop First“ und „Device Agnostic“ aufgetaucht, Designmuster wurden entwickelt, neue Standards wie der
Wir erstellen keine Websites mehr für bestimmte Bildschirmgrößen, Browser oder Geräte. Wir bauen sie stattdessen so, dass sie auf jedem Gerät und bei jeder Bildschirmgröße gleichermaßen Spaß machen. Wir verwenden dazu "Medienabfragen", wobei das Viewport-Meta-Tag nicht vergessen wird.
Medienabfragen ermöglichen es uns, Stilregeln an eine bestimmte Umgebung anzupassen. Eine der häufigsten Anwendungen von Medienabfragen besteht darin, Stile innerhalb eines bestimmten Bereichs der Ansichtsfensterbreite zu ändern. Mit dem folgenden Code wird beispielsweise die Seitenleiste ausgeblendet, wenn auf die Website über ein Ansichtsfenster mit einer Breite von bis zu 720px zugegriffen wird.
.Site-Sidebar Anzeige: Flex; flex: 1 1 320px; @media (max-width: 720px) .site-sidebar display: none;
Medienabfragen wurden zusammen mit den Geräten weiterentwickelt und mit einigen zusätzlichen Funktionen wie z Orientierung und Auflösung. Das folgende Beispiel zeigt, wie wir eine dieser Funktionen verwenden können, um eine größere Bildgröße auf einem hochauflösenden Bildschirm bereitzustellen.
.Site-Logo a display: Inline-Block; Hintergrund: URL (images / logo.png) keine Wiederholung; @media screen und (min-resolution: 2dppx) background: url (images/[email protected]);
Medienanfragen sind bei der Bereitstellung von Responsive Experience zu einer festen Komponente geworden. Machen Sie sich mit diesen Artikeln, Tutorials und Tipps zur Nutzung von Medienanfragen in unseren vorherigen Beiträgen in Tuts + sowie im gesamten Internet vertraut.
Medienanfragen sind im Responsive-Webdesign nicht die Silberkugel für jede Situation. Tatsächlich war dies nie beabsichtigt.
Heutzutage gibt es eine große Auswahl an Geräten in verschiedenen Größen und Eigenschaften, die die Grenze zwischen "mobil" und "desktop" verwischen (ich schaue nach "Hybrid-Laptops"). Aus diesem Grund war die Aufrechterhaltung der Ästhetik einer Website, einer großartigen Benutzererfahrung und Leistung noch nie so schwierig.
Bei Google IO 2015 können Entwickler ihre Website auf über 100 verschiedenen Geräten überprüfen.Wenn Sie Dinge wie Anzeigen, Tabellen und ältere Inhalte in den Mix aufgenommen haben, kann die Situation noch schlimmer werden. Bald werden Sie auf die "weniger guten" Aspekte von Medienanfragen stoßen.
Betrachten Sie das folgende Beispiel. Wir haben eine UI-Komponente, um das Profil unseres Teammitglieds anzuzeigen. Wir möchten diese genaue Komponente an verschiedenen Stellen auf unserer Website verwenden. Dieses Beispiel zeigt, wie die Benutzeroberfläche bei a angeordnet ist 780px Breite des Ansichtsfensters.
Auf der Seite "Benutzerprofil" setzen wir links den Benutzeravatar und rechts den Benutzernamen sowie die Biografie.
Layout des Benutzerprofils im Profil "Benutzer".Auf der „Team“ -Seite auf unserer Website ändert sich jedoch das Layout. Das Benutzer-Avatar-Bild wird jetzt oben angezeigt, und der Benutzername sowie die Biografie befinden sich darunter. Die Schriftgröße kann auch etwas kleiner sein.
Benutzerprofil-Layout auf der "Team" -Seite.Diese Situation kann mit Medienabfragen behoben werden. Wir können das CSS beispielsweise wie folgt schreiben:
/ ** * Profile * / .team-profile text-align: center; .team-Profil .bio margin-top: 20px; Schriftgröße: 14px; @media (min-width: 480px) .team-profile text-align: left; Anzeige: Flex; .team-Profil .avatar flex: 0 0 120px; .team-profile .bio font-size: 16px; flex: 0 1 580x; / ** * Profilkarte. * / .team-profile-card text-align: center; .team-profile-card .bio margin-top: 20px; Schriftgröße: 14px; / ** * Möglicherweise überschreiben einige * / .page .team-profile-card …
Es ist fixierbar, solange wir einige zusätzliche Identifikationsklassen verwenden: .Benutzerprofil und .Benutzer-Profilkarte.
Es widerspricht jedoch auch unserer UI als wiederverwendbare Komponente; Eine Benutzeroberfläche, die an einer beliebigen Stelle der Website platziert werden kann und sich an ihre Umgebung anpassen kann.
In diesem Beispiel möchten wir, dass das Layout unserer Komponente angepasst wird, wenn es von einem kleinen Container umschlossen wird, statt wenn es vom Browser-Ansichtsfenster gedrückt wird. Anstatt sich also auf die Größe des Browser-Ansichtsfensters zu verlassen, um das Layout zu verschieben, können wir dies nicht tun Elementebene?
Die Idee der Elementabfragen entstand zu Beginn des Jahres 2012; Ein paar Jahre nachdem sich Responsive Web Design zur Mainstream-Methode entwickelt hatte. Leider gab es wahrscheinlich nicht viele überzeugende Gründe, dies damals als Web-Standard anzusprechen - die Welt gewöhnte sich immer noch daran, wieder in die Luft zu gehen.
@ianstormtaylor yeah "Elementabfragen" kam immer wieder auf
- Paul Irish (@paul_irish) 24. Januar 2012
Web-Communities haben ihre eigenen Initiativen gestartet. RICG (Responsive Issue Community Group), dieselbe Gruppe, die die
Elementabfragen funktionieren ähnlich wie Medienabfragen. Sie hören jedoch die Elementgröße anstelle des Browser-Ansichtsfensters. Dies ermöglicht uns den Aufbau eines wirklich modularen UI-Systems mit DRY-er-Code-Basis. Mit demselben Beispiel könnten wir die Stile unserer UI-Komponente mit EQCSS wie folgt umschreiben:
.Teamprofil text-align: center; .team-Profil .bio margin-top: 20px; Schriftgröße: 14px; @element ".team-profile" und (min-width: 480px) .team-profile display: flex; .team-Profil .avatar flex: 1 1 120px; .team-profile .bio text-align: left; Schriftgröße: 16px; flex: 1 1 580x;
Hier ist es uns egal, wie breit das Ansichtsfenster ist. Wie Sie oben sehen können, solange der UI gedehnt zu 480px oder breiter zeigen wir die .Benutzerbild und das .bio Seite an Seite. Wenn die Breite der Benutzeroberfläche darunter schrumpft 480px wir lassen das .Benutzerbild und .bio stapeln und den Inhalt an der Mitte ausrichten.
Nur um zu klären, ich sage nicht, dass die Verwendung von Medienabfragen schlecht ist, überhaupt nicht. Medienanfragen sind wunderbar und wir haben gesehen, dass viele Websites heute erstellt wurden. Medienabfragen und Elementabfragen können durchaus nebeneinander existieren. Es gibt jedoch viele Entwurfsszenarien, bei denen die Verwendung von Elementabfragen sinnvoller ist als die Verwendung von Medienabfragen.
Leider haben Elementabfragen noch einen sehr langen Weg vor sich, bis sie schließlich als Webstandard gelten. Unsere Hoffnung liegt hier bei allen guten Menschen bei RICG.
Während wir warten, können wir das Potenzial von Elementabfragen durch eine JavaScript-Bibliothek wie EQCSS erkunden. Und genau das werden wir im nächsten Tutorial tun. Bleib dran!
Accentsconagua