Neue und klassische Media Queries 09.05.2021, 18:50 Uhr

Features satt

Mit Media Queries können Sie auf unterschiedlich dimensionierte Viewports reagieren, aber auch auf Benutzereinstellungen und vieles mehr.

Bei Media Queries denken die meisten sicher zuerst an die Features min-width/max-width, die beim responsiven Webdesign helfen, Anpassungen an die Viewportgröße durchzuführen. Aber Media Queries können wesentlich mehr. Der Artikel bietet Ihnen einen Überblick, was alles möglich ist, inklusive geplanter Features. Zum Schluss geht es außerdem um die erste Implementierung von Container-Queries.

Grundprinzip von Media Queries

In CSS können Sie Formatierungen bedingt anweisen, das heißt, Styles davon abhängig machen, dass eine Bedingung zutrifft. Während Sie mit @supports Formatierungen von den Fähigkeiten des Browsers abhängig machen, können Sie mit Media Queries auf die Eigenschaften des Ausgabegeräts oder auf die Präferenzen der User reagieren:

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