Media Queries mit CSS3 in Aktion
Media Queries sind eine CSS3-Technik, die es Webentwicklern ermöglicht, bestimmte Bedingungen wie z.B. die Browser-Fenstergröße und die Bildschirmauflösung des Nutzers zu prüfen, um so ein jeweils optimiertes Layout für das aufrufende Endgerät als Responsive Webdesign auszuliefern. Media Queries sind eine Erweiterung der schon in CSS2 vorhandenen medienabhängigen Cascading Stylesheets für verschiedene Ausgabeformate wie z.B. eine Screen- oder eine Druckversion. Das meist verwendete Media-Query-Feature ist die Ausgabebreite „width“. Indem spezifische CSS-Regeln für verschiedene Ausgabemedien definiert werden, können Websites für unterschiedliche Viewports wie z.B. Smartphones, Tablets oder Desktop-Browser mit variierenden Auflösungen und Merkmalen dargestellt werden.
Eivind Uggedal hat unter Mediaqueri.es eine umfangreiche Sammlung von aktuell 360 Websites als Inspirationsquelle zusammengestellt, die alle vorbildlich nach Responsive Webdesign Regeln mit CSS3 Media Queries umgesetzt sind. Wenn man sich mit seinem Twitter-Account bei Mediaqueri.es anmeldet, kann man auch eigene Websites zur Auflistung vorschlagen und die bereits aufgeführten Websites liken. Welche Media-Querie-Website gerade am beliebtesten ist, zeigt das Leaderboard.
Mit den CSS3 Media Queries ist eine fast fertige Standardisierung des W3C als Candidate Recommendation verfügbar, die bereits effizient für Websites mit Responsive Webdesign eingesetzt wird. Alle gängigen Desktop-Browser und die mobilen Vertreter wie iOS Safari, Opera Mini oder Android Browser unterstützen Media Queries inzwischen. Ab Version 9 ist auch der Internet Explorer nicht mehr aussen vor.
Kennt ihr noch weitere interessante Inspirationsquellen für Responsive Webdesign mit CSS3 Media Queries?
Weiterführende Links:
- Mediaqueri.es
- W3C Recommendation zu CSS3 Media Queries
- CSS3 – t3n
- Responsive Webdesign – t3n
- Responsive Webdesign mit HTML5 und CSS3 – Grundlagen – t3n
von rosi 20.04.2012 (15:26Uhr) 1.
Wow! Ich finde es ist eine tolle Entwicklung, dass das Layout an die jeweiligen Einstellungen des Nutzers mit der CSS3-Technik angepasst werden kann.
ant-marketing.org
von Die besten meiner geteilten Links auf Tw… 04.05.2012 (10:35Uhr) 2.
[...] t3n Magazin habe ich über eine Responsive Sammlung namens mediaqueri.es gelesen. Eine gelungene Inspiration wenn es um responsives Webdesign geht, wie ich [...]
von Mo 13.07.2012 (19:38Uhr) 3.
Die Einbindung von canvas bzw. SVG (Scalable Vector Graphics) Elementen öffnet natürlich viele Türen um eine Website Geräteübergreifend, “Responsive” zu gestalten. Diese werden von den meisten Browsern jedoch (noch) lange nicht so gut unterstützt, wie CSS + CSS3 Befehle. Mit der Nutzung von CSS3 in Verbindung mit Media Queries lassen sich längst nicht mehr nur einfache Kreis- und Rechtecksformen erzeugen. Mit ein wenig kreativität lassen sich komplette Grafiken rein in CSS zeichnen.. diese Darstellung ist natürlich Geräteübergreifend und wird von allen Browsern unterstützt!
Ein schönes Beispiel hierfür haben wir zur Visualisierung von Media Queries auf unserer Website bereitgestellt:
Beispielseite
von inspire 15.07.2012 (02:35Uhr) 4.
Durch den Vormarsch der Mobileingeräte ist diese Technik sehr hilfreich. Wenn es auch nicht leicht ist die umzusetzen.
von 5 Beispiele für Responsive Webdesign im… 22.04.2013 (12:26Uhr) 5.
[...] Mediaqueri.es: Inspiration zu Responsive Webdesign mit CSS3 – t3n News [...]