Komponentenbasiertes Layouten 11.10.2021, 09:06 Uhr

Container Queries

Container Queries basieren auf CSS-Containment und ermöglichen unterschiedliche Styles je nachdem, wo Elemente stehen.
(Quelle: Maurice)
Eine der wichtigsten Komponenten für anpassungsfähige, responsive Webseiten sind die Media Queries. Damit fragen Sie die Größe des Viewports ab und können dann in Abhängigkeit davon unterschiedliche Formatierungen anwenden. Allerdings orientieren sich Media Queries immer am Viewport. Das genügt bei einfachen Layouts, jedoch nicht bei einem Komponenten-basierten Ansatz. Im Artikel lesen Sie, welche Lösungen es in Zukunft dafür geben wird und wie man sich bis dahin behilft. Außerdem erfahren Sie, warum und wie Sie heute schon contain für eine schnellere Browserdarstellung nutzen können.

Die Grenzen von Media Queries

Gehen wir von einer einfachen Komponente aus, die aus einem Bild und Text besteht. Um die Komponente herum befindet sich ein .wrapper-Element:

Jetzt 1 Monat kostenlos testen!

Sie wollen zukünftig auch von den Vorteilen eines plus-Abos profitieren? Werden Sie jetzt dotnetpro-plus-Kunde.
  • + Digitales Kundenkonto,
  • + Zugriff auf das digitale Heft,
  • + Zugang zum digitalen Heftarchiv,
  • + Auf Wunsch: Weekly Newsletter,
  • + Sämtliche Codebeispiele im digitalen Heftarchiv verfügbar