Element Queries 10.09.2016, 15:35 Uhr

Anpassungsfähig

Wenn die klassischen Media Queries nicht ausreichen, helfen Element Queries weiter.
Media Queries gelten im Allgemeinen als wichtigste Komponente für responsive Webseiten. Dank Media Queries lassen sich eigene CSS-Angaben für verschiedene Viewportgrößen machen. So können Sie unterschiedliche Formatierungen für große wie für kleine Browserfenster durchführen. Klassischerweise definiert man etwa ein mehrspaltiges Layout bei viel verfügbarem Platz und ein einspaltiges für kleine Bildschirme. Das funktioniert sehr gut für das grundlegende Layout, schwieriger wird es aber für kleinere Komponenten des Layouts: Für deren optimale Anzeige sind oft nicht die Viewportgrößen ausschlaggebend, sondern die sie direkt umgebenden Elemente.
Nehmen wir als Beispiel eine Tabelle. Inzwischen gibt es eine Reihe von Lösungen, um Tabellen im responsiven Webdesign gut darzustellen. So kann man eine aufgelöste Darstellung untereinander bei kleinen Viewports wählen und die klassische Tabellendarstellung, sofern genügend Platz vorhanden ist. Was aber tut man jetzt, wenn bei einem Projekt die Tabelle auf manchen Unterseiten im großen Hauptbereich angezeigt werden soll und auf anderen hingegen in der kleineren Sidebar (Bild 1)? In diesem Fall kommen wir mit Media Queries nicht weiter, weil die zu ändernde Darstellung nicht von der Viewportgröße abhängt.

web & mobile DEVELOPER

Sie wollen zukünftig auch von den Vorteilen eines plus-Abos profitieren? Werden Sie jetzt web&mobile Developer plus Kunde.
  • 2 Monate Gratis testen
  • Über 4.000 qualifizierte Fachartikel
  • Diverse DevBooks thematisch für Sie zusammen gestellt
  • Webcasts von 30 - 90 Min.
  • Aufzeichnungen von ausgewählten Fortbildungen und Konferenzen
  • Auf jedem Gerät verfügbar