Die Anforderungen an einen Webdesigner sind in den letzten Jahren aufgrund des raschen technischen Fortschritts deutlich gestiegen. Heutzutage reicht es nicht mehr, eine Webseite für die verschiedenen Browser, wie z. B. Safari, Google Chrome, Mozilla Firefox und Internet Explorer zu optimieren.

Eine gute Darstellung der Website auf Handys und Tablets wie z. B. Samsung Galaxy, iPhone, iPad, HTC, Windows Phone und deren Kollegen ist mindestens genauso wichtig. Aber damit nicht genug, denn für jedes dieser mobilen Endgeräte gibt es noch zwei weitere Ansichten: Hochformat und Querformat.

Der Begriff "Responsives Webdesign" beschreibt die Optimierung einer Webseite für mobile Endgeräte. Abgesehen von der abweichenen Anzahl von Pixel für Höhe und Breite kommt die Tatsache hinzu, dass es beim Handy und Tablet der Mauspfeil durch ein Touchscreen abgelöst wurde. Somit sind Tipp-Texte sowie hover-Styles nicht mehr möglich.

Mit Media Queries kann das aktuell verwendete Gerät abgefragt und entsprechend darauf reagiert werden. So kann eine zweispalte Webseite z. B. auf dem Handy als nur einspaltige angezeigt werden, da die Breite hier nicht zur Verfügung steht. Wichtig ist hierbei, dass die Webseite mit einzelnen Elementen wie „div“'s und mit CSS erstellt wurde. Eine Table-Layout-Tabelle z. B. kann nicht durch Media Queries beeinfluss und zerlegt werden.

Die Abfrage kann beim Einbinden eines externen CSS-Styles (Beispiel 1) sowie direkt im CSS (Beispiel 2) durchgefürt werden.

Beispiel 1

CSS-Datei für iPhone 5 unf 5S für Hoch- und Querformat:

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

Die Ausrichtung (Hochformat oder Querformat) kann dann in der CSS-Datei „iPhone.css“ unterschieden werden:

@media screen and ( orientation : portrait ) {
	* { font-size: 42px; } }
 
@media screen and ( orientation : landscape ) {
	#contact { height: auto; }
}

Beispiel 2

CSS-Styles für iPhone 4 und 4S im Hochformat:

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

Auf folgender Webseite gibt es eine Auflistung der Media Queries für alle gängigen Mobilen Geräte: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/