Media Queries: Mobile Versionen von Websites mit CSS3 erstellen

Rachel Andrew (Übersetzung Manuela Müller)

CSS 3 ist ein Thema, das Webdesigner und -entwickler nach wie vor begeistert und frustriert. Wir sind begeistert von den Möglichkeiten, die CSS3 uns bietet und welche Probleme wir damit lösen können. Gleichzeitig sind wir frustriert über die mangelnde Unterstützung im Internet Explorer 8 – um ältere Browser einmal ganz außen vor zu lassen. Dieser Artikel demonstriert ebenfalls eine Technik, die vom IE 8 nicht unterstützt wird. Allerdings ist das auch völlig egal, da die vorgestellte Lösung am sinnvollsten dort eingesetzt wird, wo es eine Menge Unterstützung gibt – nämlich auf kleinen mobilen Geräten wie dem iPhone oder alles, was unter Android läuft.

Im folgenden werde ich erklären, wie Sie eine iPhone-Version Ihrer regulären Website mit CSS 3 erstellen können, die schon jetzt funktioniert. Wir schauen uns ein sehr einfaches Beispiel an und ich werde Schritt für Schritt erläutern, wie ich ein Stylesheet für Geräte mit kleinem Display in meine eigene Website eingefügt habe. An dem Beispiel können Sie nachvollziehen, wie einfach es ist, bestehende Websites um zusätzliche Stylesheets für mobile Geräte zu ergänzen.

Media Queries

Wenn Sie jemals ein separates Print Stylesheet erstellt haben, werden Sie mit dem Konzept vertraut sein, wie ein bestimmtes Stylesheet unter gegebenen Bedingungen ins Spiel kommt – um beim Beispiel des Print Stylesheets zu bleiben – eben dann, wenn die Seite gedruckt wird. Diese Aufgabe wird in CSS 2 durch media types geregelt.

media types ermöglichen es Ihnen, die Ausgabe von Stylesheets einem bestimmten Medientyp zuzuordnen.

Die Media Queries in CSS3 greifen dieses Konzept auf und bauen es weiter aus. Anstatt nach einem bestimmten Medium zu schauen, können Sie mit media queries die Eigenschaften und Fähigkeiten von Geräten und Ausgabemedien abfragen. Sie können diese Abfragen dazu verwenden, um alles mögliche zu überprüfen, so zum Beispiel:

  • Breite und Höhe (des Browser-Fensters)
  • Breite und Höhe des Geräts
  • Position – befindet sich das Mobiltelefon im Querformat oder Hochformat?
  • Bildschirmauflösung

Wenn der Anwender einen Browser verwendet, der media queries unterstützt, können wir den CSS-Code ganz gezielt für bestimmte Situationen schreiben. So können Sie abfragen, ob ein Anwender ein kleines Gerät wie ein Smart Phone verwendet und dann ein passendes Layout liefern. Wenn Sie ein entsprechendes Beispiel in Aktion sehen möchten, schauen Sie sich einmal die jüngst frei geschaltete Website der UK Web Conference an. dConstruct setzt auf der neuen Website für die Konferenz 2010 media queries sehr effektvoll ein.

dConstruct 2010 website on a desktop browser

So sieht dConstruct 2010 Website auf einem Desktop Computer in Safari aus.

dconstruct website on the iPhone

dConstruct 2010 website auf einem iPhone

Wie Sie an den beiden obigen Abbildungen sehen, wurde die Website nicht einfach an die Größe des kleineren Displays angepasst, sondern das komplette Layout wurde für den einfachen Zugriff mit einem kleinen Ausgabemedien optimiert.

Viele von Ihnen werden jetzt vermutlich denken, dass dies ein iPhone-Layout ist. Ist es aber nicht. Das Layout wird exakt so auf meinem Android-Mobiltelefon angezeigt. Mit dem Einsatz von Media Queries und dem Abfragen der Geräte-Eigenschaften versorgt die dConstruct-Site alle Arten von Geräten – sogar solche, an die die Entwickler möglicherweise noch gar nicht gedacht haben!

Media Queries zum Erstellen eines Stylesheet für Mobiltelefone verwenden

Wir legen los und schauen uns zunächst ein sehr einfaches Beispiel an. Die folgende Abbildung zeigt ein schlichtes Zweispalten-Layout.

Simple example in a browser
Die Ausgangssituation

Um das Lesen auf einem Telefon zu erleichtern, habe ich mich dazu entschlossen, das komplette Design zu vereinfachen und die Inhalte in einer einzigen Spalte anzuordnen. Weiterhin soll der Header wesentlich kleiner sein, damit die Anwender nicht lange scrollen müssen, bevor sie an die eigentlichen Inhalte gelangen.

Methode 1 – Alternative im Hauptstylesheet

Media Queries können Sie auf verschiedene Weisen verwenden. Eine Methode ist es, den alternativen CSS-Code direkt in das zentrale Stylesheet einzubinden. Um kleine Geräte anzusprechen, verwenden wir die folgende Syntax:

	@media only screen and (max-device-width: 480px) {

	}

Wir können die alternativen Werte für kleine Displays und Geräte mit geringer Breite innerhalb der geschweiften Klammern einfügen. Indem wir die Kaskade verwenden, können wir ganz einfach alle anderen Deklarationen überschreiben, die wir vorher in unserem CSS-Code für Desktop-Browser notiert haben. Solange dieser Abschnitt an letzter Stelle im Stylesheet steht, werden alle vorhergehenden Regelungen überschreiben.

Um das Layout zu linearisieren und eine kleinere Header-Grafik zu verwenden, füge ich den folgenden Code hinzu:

	@media only screen and (max-device-width: 480px) {
		div#wrapper {
			width: 400px;
		}

		div#header {
			background-image: url(media-queries-phone.jpg);
			height: 93px;
			position: relative;
		}

		div#header h1 {
			font-size: 140%;
		}

		#content {
			float: none;
			width: 100%;
		}

		#navigation {
			float:none;
			width: auto;
		}
	}

Im vorhergehenden Code verwende ich ein alternatives Hintergrundbild, reduziere die Höhe des Headers, setze die zuvor für das zweispaltige Layout deklarierten Floats auf none und überschreibe die ursprüngliche Breite. Diese Vorgaben werden nur bei einem Gerät mit kleinem Display angewendet.

Simple example on a phone

So sieht mein simples Beispiel auf einem iPhone aus.

Methode 2 – Link auf separates Stylesheet setzen

Den spezifischen Code für kleine Geräte inline zu notieren, mag ganz gut sein, wenn Sie nur geringüfige Änderungen vorzunehmen haben. Wenn Sie jedoch größere Änderungen vornehmen oder aus Gründen der Übersichtlichkeit die Stylesheets für Desktop-Browser und Browser kleiner Geräte trennen möchten, empfiehlt sich ein Link auf ein separates Stylesheet.

Um ein separates Stylesheet für kleine Geräte nach Ihrem Hauptstylesheet einzufügen und das Kaskadieren zum Überschreiben der Deklarationen zu nutzen, verwenden Sie den folgenden Code:

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />

Media queries testen

Sofern Sie ein iPhone und/oder ein Android-Handy oder ein anderes Gerät mit einem media-queries-unterstützenden Browser besitzen, können Sie den CSS-Code selbst testen. Allerdings müssen Sie den Code irgendwo hochladen, um ihn anzeigen zu können. Was tun Sie jedoch, wenn Sie die entsprechenden Geräte nicht besitzen und lokal testen möchten?

Online-Dienste nutzen

Eine hervorragende Website, die Sie beim Entwicklungsprozess unterstützt ist ProtoFluid. Im Formular rechts oben können Sie Ihre URL eingeben (kann auch eine lokale sein) und das Design anschließend in einer Vorschau anzeigen, so wie es auf einem iPhone, iPad und einer Reihe anderer Geräte dargestellt würde. Das folgende Bildschirmfoto zeigt die bereits bekannte dConstruct-Site in der iPhone-Vorschau von ProtoFluid.

dConstruct site in ProtoFluid

Die dConstruct-2010-Website in ProtoFluid

Sie können auch Ihre eigene Fenstergröße eingeben, falls Sie die Darstellung Ihrer App oder Website für ein ganz bestimmtest Gerät testen – vorausgesetzt Sie kennen die Abmessungen des Displays.

Unsere weiter oben verwendete Media Query müssen Sie für das Testen mit ProtoFluid ein wenig ändern, um sowohl max-width als auch max-device-width einzubinden. Damit kommt die Medienabfrage auch ins Spiel, wenn ein Anwender einen Desktop-Browser mit einem sehr kleinen Fenster nutzt.

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {

	}

Nachdem Sie Ihren Code entsprechend angepasst und die Seite im Browser neu geladen haben, ziehen Sie doch einfach mal das Browserfenster kleiner und schauen Sie, was passiert. Die Regel Media Queries reagiert, sobald der Viewport Ihrem vorgegebenen Wert von 480 Pixeln entspricht.

Das wirklich Schöne an ProtoFluid ist, dass Sie beim Optimieren Ihres Designs auch Tools wie FireBug nutzen können – etwas, worauf Sie verzichten müssen, sobald die Site oder Anwendung auf dem iPhone ist.

Natürlich sollten Sie Ihr Layout auf so vielen verschiedenen Geräten wie möglich anzeigen lassen und ausprobieren. Trotzdem macht ProtoFluid das Entwickeln und Testen wesentlich einfacher.

Hinweis: Wenn Sie vermeiden möchten, dass das Layout Ihrer Website verändert wird, sobald ein Anwender die Größe des Browser-Fensters reduziert, können Sie die Vorgabe für die maximale Breite aus Ihrer Media Query entfernen, bevor Sie die Website frei schalten. So stellen Sie sicher, dass das alternative Layout nur bei der Abfrage mit Browsern kleiner Geräte gezeigt wird, nicht jedoch bei kleinem Viewport von Desktop-Browsern.

Eine bestehende Seite umbauen

Das vorhergehende Beispiel ist sehr einfach gehalten, um die Technik zu demonstrieren. Sie können dieses Beispiel allerdings auch dafür einsetzen, um eine bestehende Website um eine zusätzliche Version für kleine Geräte zu ergänzen. Eines der überzeugendsten Verkaufsargumente für CSS-Layouts war ja gerade die Fähigkeit, alternative Versionen eines Designs zu ermöglichen.

Es folgt ein kleines Experiment mit meiner Firmen-Website, deren Layout ich mithilfe der beschriebenen Technik umbauen werde.

Das Desktop-Layout

Meine Firmen-Website hat zur Zeit ein mehrspaltiges Layout. Die Startseite ist etwas anders gestaltet – ansonsten handelt es sich um drei Spalten mit fester Breite. Das Design ist schon ein paar Jahre alt, so dass wir beim Erstellen Media Queries noch nicht berücksichtigt haben.
edgeofmyseat.com website in Safari on the desktop
Meine Website in einem Desktop-Browser

Das neue Stylesheet einbinden

Da viele Änderungen erforderlich sind, um das Layout zu vereinfachen, werde ich ein separates Stylesheet erstellen und Media Queries dafür verwenden, um das neue Stylesheet nach dem aktuellen Stylesheet zu laden – aber nur dann, wenn die abgefragte maximale Breite weniger als 480 Pixel beträgt.

	<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="/assets/css/small-device.css" />

Zunächst erstelle ich eine Kopie des bestehenden Stylesheets und speichere sie unter dem Namen small-device.css. Anschließend überschreibe ich Schritt für Schritt bestimmte Regeln und lösche alles, was ich nicht benötige.

Den Header verkleinern

Meine erste Änderung: Das Logo soll auf einem kleinen Display schön dargestellt werden. Da es als Hintergrundbild eingebunden ist, kann ich in diesem Stylesheet ohne Probleme eine andere Bildquelle für das Logo angeben. Zudem verwende ich ein weiteres Hintergrundbild mit einem kürzeren oberen Bereich, über dem das Logo platziert ist.

	body {
		background-image: url(/img/small-bg.png);
	}

	#wrapper {
		width: auto;
		margin: auto;
		text-align: left;
		background-image: url(/img/small-logo.png);
		background-position: left 5px;
		background-repeat: no-repeat;
		min-height: 400px;
	}

Das Layout linearisieren

Als nächste größere Aufgabe vereinfache ich das Layout und stelle es einspaltig dar. Das Layout für die Desktop-Version wird über floats realisiert. Ich muss daher nur den Parameter der Eigenschaft float auf none setzen und die Breite auf auto. Nun werden die Spalten einfach nacheinander statt nebeneinander dargestellt.

	.article #aside {
		float: none;
		width: auto;
	}

Aufräumarbeiten

Danach kann es gleich an die Optimierung via ProtoFluid und Firebug gehen. Es sind lediglich kleine Änderungen erforderlich, um Ränder und Innenabstände auf passende Werte zu setzen, da die ursprünglichen Spalten nun untereinander, nicht nebeneinander, angeordnet sind.

Ich erledige das, indem ich innerhalb von ProtoFluid mit Firebug herumspiele, und die Werte so lange ändere, bis ich mit dem Ergebnis zufrieden bin. Anschließend kopiere ich den CSS-Code in das Stylesheet.

The mobile layout on ProtoFluid
Testen und Optimieren via ProtoFluid

Auf dem iPhone testen

Nachdem ich das separate Styhlesheet erstellt und auf den Server hochgeladen habe, möchte ich es natürlich auch auf einem real existierenden Zielgerät testen. Ein Aufruf mit dem iPhone zeigt mir, dass die Website nach wie vor ausgezoomt – über die volle Breite – angezeigt wird, anstatt auf meine gute lesbare einzelne Spalte zu zoomen.

Ein Blick in die Website für Safari-Entwickler gibt mir des Rätsels Lösung. Ein Meta-Tag im Header der Website, das die Breite des Viewports vorgibt, schafft Abhilfe:

<meta name=“viewport“ content=“width=device-width“ />

Nach dem Einfügen des Metatags wird die Seite korrekt im einspaltigen Layout auf dem iPhone angezeigt.

edgeofmyseat.com on the iPhone
Dank Metatag sieht die Website nun auch auf dem iPhone gut aus.

An diesem schlichten Umbau können Sie nachvollziehen, wie einfach es ist, Ihrer Website eine mobile Version zu spendieren. Beim Erstellen einer ganz neuen Webpräsenz mit Media Queries würde ich von vornherein etwas anderes vorgehen und auf die folgenden Aspekte achten:

  • geeignete Reihenfolge der Spalten berücksichtigen,
  • so oft wie möglich und wo sinnvoll Hintergrundbilder verwenden, da sie leicht per CSS zu wechseln sind,
  • gegebenenfalls fluid images einsetzen.

In unserem Desktop-Layout gibt es auf der Startseite einen Content Slider für Arbeitsproben. Auf einem Touch-Screen-Gerät ist dieser Content Slider nicht einfach zu bedienen. Daher prüfte ich mithilfe von JavaScript, ob die Größe des Browser-Fensters sehr schmal ist und der Bildwechsler deshalb nicht gestartet wird. Das Script war ohnehin schon so geschrieben, dass der Effekt – das Laden des Sliders zu stoppen, immer dann ausgelöst wird, wenn eine Arbeitsprobe auf dem Bildschirm angezeigt wird. Das schien eine ganz passable Lösung für Anwender mit kleinen Geräten zu sein. Mit etwas mehr Code konnte ich eine alternative Version des Image Sliders für die Anwender mobiler Geräte erstellen, so dass die Art der Interaktion den Gegebenheiten eines Touch Screens besser angepasst ist.

Tutorials und Ressourcen

Obwohl diese Technik noch relativ neu ist, gibt es bereits zahlreiche hervorragende Tutorials zum Einsatz von Media Queries. Wenn Sie weitere gute Tutorials oder Referenzen kennen, posten Sie die Links doch bitte in den Kommentaren.

Weitere Inspirationen

Wenn es Sie interessiert, was man mit Media Queries sont noch anstellen kann, schauen Sie sich doch einmal auf Hicksdesign um. John Hicks verschafft dank Media Queries nicht nur Anwendern mobiler Geräte eine besseres Anwendererlebnis, sondern auch denjenigen Zeitgenossen, die am Desktop PC mit kleinen Browser-Fenstern arbeiten.

Bei Simon Collison kann man weitere interessante Beispiele für den Einsatz dieser Technik sehen.

Probieren Sie es selbst aus

Der Einsatz von Media Queries ist ein guter Ansatz, um CSS 3 in Ihrer täglichen Arbeit zu verwenden. Denken Sie daran, dass Media-Queries-fähige Browser auch eine Reihe anderer CSS-3-Eigenschaften unterstützen. In Ihren zusätzlichen Stylesheets für kleine Geräte können Sie daher unbesorgt weitere CSS-3-Eigenschaften verwenden, um bei Ausgabe auf einem SmartPhone, iPad oder sonstigem mobilen Gerät elegante Effekte zu erzielen.

Über Kommentare zu Ihren Erfahrungen mit Media Queries und anderen CSS-3-Techniken freuen wir uns!

(mm), ™

Sortiert nach:   neueste | älteste | beste Bewertung
Gotisch
Gast
Gotisch
6 Jahre 16 Tage her

Also auf meinem Android telefon mit standardbrowser sehe ich manchmal noch die ganz normale seite… scheint doch nicht so ganz zu klappen.

ScaraX
Gast
ScaraX
6 Jahre 16 Tage her

@ Gotisch: ja, im querformat sieht man die normale Ansicht – ist aber auch gut so, weil der Screen ja breiter ist als die angegebenen 480px.

Auf der Seite gibts allerdings ein paar Fehler, wenn man die Seite im Querformat löd und dann ins hochformat wechselt und umgekehrt. Das liegt aber an dem verwendeten javascript-code und nicht direkt an den media queries.

MfG
ScaraX

zyko
Gast
zyko
6 Jahre 16 Tage her

Daaaanke :-)
Hab vor kurzem erst mit einem Kumpel darüber diskutiert, ob man denn nicht für die mobilen Browser seine Webseite mit einfachen Dingen gleich etwas verbesser kann.
Ein paar div’s weniger sollten es sein – genügt schon. Die die eh nicht so wichtig sind (Werbung, etc) einfach ausblenden.
Ich dachte da sofort auch an die media tags, man kennt das ja vom drucken her.
Aber auch er meinte, dass das per media tags wohl nicht geht.
Jedes Phone hat ja auch seine eigene Auflösung.
Wieder was gelernt – das machma *ggg* ;-)

Helen
Gast
Helen
6 Jahre 15 Tage her

Proto Fluid ist kein verläßliches Tool. Es nimmt ja nicht einmal den User Agent des Gerätes an, das es simuliert (machen leider die wenigsten Simulatoren), weswegen es auch Mobileseite grundsetzlich gar nicht erkennt. Auch Media Queries liest es falsch aus. Proto Fluid ist nicht mehr als ein skalierbarer Bilderrahmen, der etwas völlig anderes darstellt als das reale Gerät.

Elias
Gast
Elias
3 Jahre 9 Monate her

Media-Queries scheinen sehr mächtig zu sein. Aber heutzutage muss es doch sicher eine einfachere Lösung geben? Ich meine eine separate Seite erstellen lassen um nicht den ganzen Code in der normalen Homepage verändern zu müssen. Oder?

Raphael
Gast
Raphael
3 Jahre 8 Monate her

@Elias: Aber hier geht es doch genau um den Programmier-Ansatz einer mobilen Version einer Website ;-) Aber nach kurzem Suchen bin auch http://www.mobilonso.com gestossen. Ich denke das ist doch so etwas wonach du suchst, hoffentlich.

John Snow
Gast
2 Jahre 1 Monat her

Ich kenne das Problem Elias, habe mich durch divere Foren und Berichte gekämpft aber dann aufgegeben ;) Wir haben nun eine Lösung für unseren Gastrobetrieb von http://mobileview.ch , soweit sehr gut. Bin sicher es gibt verschiedenste Anbieter solcher Lösungen. Mobilonso habe ich mir auch angeschaut, aber dann für eine Lösung im eigenen Land entschieden ;-).

Andreas
Gast
Andreas
2 Jahre 1 Monat her
Ja, so ist es. Genaugenommen sind mir auch keine anderen Emulatoren bekannt, welche die Darstellung auf der echten Hardware halbwegs realistisch zeigen. Ist ja auch klar, denn es fehlen Aspekte wie z. B. die jeweilige Pixeldichte und die diversen Macken der verschiedenen Mobilbrowser-/Mobilbetriebssystemversionen. Wie auch immer, diesen Artikel sah ich auch schon in der engl. Originalversion. Er wurde offensichtlich stumpf übersetzt, anscheinend von jemandem ohne Sachverstand bzgl. dieser Materie. Ohnehin scheint es mir bei IT-Blogs nicht selten ähnlich zu sein wie bei den Reiseführern – viele schreiben voneinander ab bzw. offerieren mit einigen Formulierungsumstellungen lediglich alten Wein in neuen Schläuchen.… Read more »
Dieter Petereit
Dr. Web
2 Jahre 1 Monat her
Werter Andreas! Es gibt neben Müllcontent auch Müllkommentare. Deiner ist ein Paradebeispiel dafür. Anders als du will ich aber gerne begründen, warum ich das so sehe: Diese Übersetzung hier ist eine Übersetzung eines Artikels von Rachel Andrew, der zuerst auf unserem Familienmitglied Smashing Magazine erschien und dann von Manuela Müller (seinerzeit tätig für die Smashing Media) für Dr. Web übersetzt wurde. Wir schreiben unseren Content nicht von irgendwo ab. Es dürfte allerdings nicht verwundern, dass dieser Artikel dem Original keinerlei neue Infos beifügt. Zu guter Letzt gilt es noch zu berücksichtigen, dass der Beitrag vier Jahre alt ist und gerade… Read more »
trackback

[…] Der Artikel Responsive Web Design von Ethan Marcotte zeigt anhand einer Beispielseite, wie Media-Queries angewandt werden können. Einen schönen und anschaulichen Artikel in deutscher Sprache zum Thema gibt es auf drweb.de. […]

trackback

[…] Media Queries: Mobile Versionen von Websites mit CSS3 erstellen. […]

trackback

[…] »Media Que­ries: Mobile Ver­sio­nen von Web­sites mit CSS3 erstel­len« bei Dr Web […]

trackback
5 Jahre 6 Monate her

[…] genug, inklusive Anleitungen, Testumgebungen und Wireframes daf

trackback

[…] Media Queries: Mobile Versionen von Webseiten mit CSS3 erstellen bei Dr. Web. […]

trackback

[…] zum Beitrag bei Dr. Web Dieser Eintrag wurde veröffentlicht in Allgemein von auser. Permanenter Link des Eintrags. […]

trackback

[…] Browser Media Queries wäre noch eine Alternative? (Mobile Versionen von Websites mit CSS 3 erstellen) […]

trackback
3 Jahre 4 Monate her

[…] Media Queries: Mobile Versionen von Websites mit CSS 3 erstellen – Dr. Web MagazinCSS 3 ist ein Thema, das Webdesigner und -entwickler nach wie vor begeistert und frustriert. Ein […]

pudem
Gast
pudem
3 Jahre 1 Monat her
Das ganze nochmal, offenbar wird hier das größer/kleiner-Zeichen nicht gemocht. Muss man dann selbst hinzufügen: Das ganze ist gut und schön, man muss aber bedenken: Wenn man PHP einsetzt, wird der PHP-Code dann ausgeführt, wenn man Variablen Werte zuweist, und zwar auch dann, wenn man den Code in einem Bereich definiert, den man per media queries eigentlich ausgeschlossen hat Als Beispiel die Datei weiche.php: html head link rel=“stylesheet“ type=“text/css“ href=“weiche.css“ /head body ? $grosser_bildschirm=’Leerstring‘; ? div id=’kleinerbildschirm‘ ? echo „php wird ausgefuehrt“; $grosser_bildschirm=’Wert wurde geaendert‘; ? /div ? echo $grosser_bildschirm; ? /body /html Die CSS-Datei wäre: #kleinerbildschirm { font-weight:bold; }… Read more »
trackback

[…] Auf diesen Websites habe ich die Stylesheets (CSS) jeweils um spezielle Angaben, sog. Media Queries ergänzt. Sobald die Bildschirmauflösung kleiner/gleich 480 Pixel ist, greift das […]

Silvio Siefke
Gast
Silvio Siefke
2 Jahre 7 Monate her

Hallo, danke für das Tutorial. Kann man das zentral über ein CSS Stylesheet regeln? Das man erst ein zentrales CSS Sheet lädt und dann je nach Endgerät das entsprechende Sheet gewählt wird?

if mobile mobile.css else desktop.css

So in der Art, ich hoffe Ihr versteht was ich meine. Danke.

trackback

[…] darüber hinaus mehr erfahren möchte, dürfte bei Manuela Müllers Übersetzung von Rachel Andrews Media Queries: Mobile Versionen von Websites mit CSS 3 erstellen fündig […]

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen