Wir können schon seit einer ganzen Weile medienspezifische Stylesheets definieren. Aber wie Sie bei unserem Druck-Stylesheet im Abschnitt „8 Links ausdrucken mit :after und content“ gesehen haben, waren wir bisher auf den Ausgabetyp beschränkt. Mit den Media Queries^[25] von CSS3 können wir die Darstellung einer Seite sogar an die Bildschirmgröße unserer Benutzer anpassen. Webentwickler haben schon seit Jahren mit JavaScript die Bildschirmgröße ihrer Benutzer ermittelt. Aber jetzt können wir damit anfangen, das ausschließlich mit Stylesheets zu tun. Mit Media Queries können wir Folgendes ermitteln:

Daher machen es uns Media Queries recht einfach, spezielle Stylesheets für mobile Benutzer zu entwickeln. Wie sich herausstellt, haben die Führungskräfte von AwesomeCo gerade alle ihre Blackberrys gegen brandneue iPhones ausgetauscht. Der Marketingdirektor möchte unbedingt eine iPhone-taugliche Version der Blogvorlage sehen, die wir im Abschnitt „1 Einen Blog mit semantischem Markup neu definieren“ erstellt haben. Das bekommen wir recht schnell hin.

Unser derzeitiger Blog hat ein zweispaltiges Layout mit einem Hauptinhaltsbereich und einer Seitenleiste. Am einfachsten können wir das auf einem iPhone lesbarer darstellen, indem wir die gefloateten Elemente entfernen, damit die Seitenleiste unterhalb des Hauptinhalts erscheint. Auf diese Weise müssen die Leser nicht zur Seite scrollen.

Damit das funktioniert, fügen wir den folgenden Code am Ende des Stylesheets für den Blog ein:

css3mediaquery/style.css

@media only screen and (max-device-width: 480px) {
  body{
    width:460px;
  }

  section#sidebar, section#posts{
    float: none;
    width: 100%;
  }
}

Sie können sich den Code, den wir in die geschweiften Klammern der Media Query geschrieben haben, wie ein eigenes Stylesheet vorstellen, das nur aufgerufen wird, wenn die Bedingungen der Query erfüllt sind. In diesem Fall ändern wir die Größe des Body der Seite und machen aus dem zweispaltigen Layout ein einspaltiges.

Wir können Media Queries auch beim Einbinden des Stylesheets verwenden, dann können wir unser Stylesheet für mobile Geräte in einer eigenen Datei ablegen:

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

Damit ist unser Blog sofort auf iPhones besser lesbar. Mit diesem Ansatz können Sie auch Stylesheets für andere Anzeigen erstellen, wie etwa Kioske, Tablet-PCs und andere Bildschirme verschiedenster Größen, damit Ihr Inhalt auf möglichst vielen Geräten lesbar ist.