Die Vielfalt der Geräte, die auf Websites zugreifen, wird immer größer. Gerade durch den Boom von mobilen Geräten wie Smartphones, Tablets (allen voran das iPad) oder Laptops kamen sehr viele neue Bildschirmauflösungen ins Spiel, die ebenfalls bedient werden möchten. Oftmals sehen Weblayouts, die für Desktop-Standardauflösungen gestaltet und umgesetzt wurden, auf kleinen Geräten einfach nur grausam aus. Die mobilen Geräte haben oft schon Techniken in ihre Browser integriert, die zumindest die Lesbarkeit gewährleisten sollen. Doch dem Designer in mir reicht das nicht.
Wollte man früher die Displayauflösung des Users abfragen, kamen häufig JavaScripts zum Einsatz. Relativ umständlich musste man dann noch die entsprechenden CSS-Klassen auf Basis dieser Skripte den HTML-Elementen hinzufügen. CSS2 erlaubte das Spezifizieren von verschiedenen Stylesheets für verschiedene Medientypen wie Screen oder Print. Doch das Ganze war relativ unflexibel. CSS3 schafft hier Abhilfe und führt die sogenannten Media Queries ein. Dieser Artikel soll das Prinzip der Media Queries kurz erklären und somit einen Einstieg in die Webentwicklung für verschiedenste Bildschirmauflösungen bieten. Read more »