CSS Media Queries & Nutzung des verfügbaren Platzes

Wir haben bereits die Verwendung von CSS Media Queries behandelt, um unterschiedliche Stylesheets je nach Größe des Browserfensters zuzuweisen. In diesem Beispiel haben wir das Layout der gesamten Seite basierend auf dem verfügbaren Platz geändert. Es ist jedoch nicht erforderlich, mit dieser Technik so drastische Änderungen vorzunehmen. In diesem Tutorial werden wir uns mit einer Designanpassung mit kleinerem Umfang befassen. Wir werden auch die Syntax für die Verwendung von Media Queries innerhalb eines einzigen Stylesheets und weitere Beispiele dafür behandeln.

Die CSS Media Query-Syntax zum Aufrufen eines externen Stylesheets lautet wie folgt:

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

Sie sind möglicherweise mit dem Media-Attribut vertraut, das normalerweise "screen" oder "print" oder sogar eine durch Kommas getrennte Liste wie "screen, projection" ist. Das Media-Attribut kann direkt in eine CSS-Datei integriert werden, wie hier:

@media screen {
  body {
    width: 75%;
  }
}

@media print {
  body {
    width: 100%;
  }
}

Ebenso können Sie fortgeschrittenere CSS Media Queries verwenden wie:

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
  body {
    background: #ccc;
  }
}

Sie können so viele Media Queries wie gewünscht in einer CSS-Datei verwenden. Beachten Sie, dass Sie den **and**-Operator verwenden können, um zu verlangen, dass mehrere Abfragen wahr sind, aber Sie müssen das Komma (,) als **or**-Operator verwenden, um Gruppen von mehreren Abfragen zu trennen. Das Schlüsselwort **not** kann ebenfalls verwendet werden, um die Logik zu ändern.

Beispiel

Nehmen wir an, wir haben ein Design mit variabler Breite, bei dem die Seitenleiste 35 % der Breite der Seite einnimmt. Das bedeutet, abhängig von der Breite des Browserfensters kann diese Seitenleiste sehr schmal oder sehr breit sein, das ist einfach die Natur von Designs mit variabler Breite. Mit CSS Media Queries können wir sagen: „Wenn der Browser sehr schmal ist, tue dies, wenn er breiter ist, tue dies, wenn er sehr breit ist, tue dies.“ Beachten Sie, dass die Messung der Breite nicht das Einzige ist, was Media Queries tun können. Es ist nur ein besonders praktisches Beispiel.

In unserer Beispiel-Seitenleiste haben wir eine Liste von Namen des Super Teams, die als E-Mail-Links fungieren. Der HTML-Code ist ziemlich einfach

<ul id="nav">
   <li><a data-email="[email protected]" href="mailto:[email protected]">Chris Coyier</a></li>
   <li><a data-email="[email protected]" href="mailto:[email protected]">Elisabeth Moss</a></li>
   <li><a data-email="[email protected]" href="mailto:[email protected]">Amanda Righetti</a></li>
</ul>

Es ist nur eine Liste von Links. Das href-Attribut ist ein mailto:-Link. Das einzige, was Ihnen vielleicht ungewöhnlich vorkommt, ist das data-email-Attribut. In HTML5 können Sie Attribute, die mit data- beginnen, zum Speichern von Informationen verwenden, und das ist völlig gültig. Wir möchten diese Daten später verwenden, aber der href-Wert ist nicht ganz das, was wir mit dem mailto:-Link benötigen, daher das Datenattribut.

Das Standard-Styling für die Liste wird dieses sein:

#sidebar ul li a {
  color: #900;
  text-decoration: none;
  padding: 3px 0; 
  display: block;
}

Wenn der Browser etwas breiter wird, in unserem Beispiel zwischen 520 und 699 Pixel, werden wir den zusätzlichen Platz, der sich in der Seitenleiste öffnet, nutzen, um jedem Listenelement ein E-Mail-Symbol hinzuzufügen.

@media all and (max-width: 699px) and (min-width: 520px) {
  #sidebar ul li a {
    padding-left: 21px;
    background: url(../images/email.png) left center no-repeat;
  }
}

Wenn wir breiter werden, von 700 bis 1000 Pixel, werden wir den zusätzlichen Platz wieder nutzen, um die Links anstelle des einfachen Symbols mit dem Text „E-Mail: “ (unter Verwendung von CSS Content) einzuleiten.

@media all and (max-width: 1000px) and (min-width: 700px) {
  #sidebar ul li a:before {
    content: "Email: ";
    font-style: italic;
    color: #666;
  }
}

Noch breiter, bei Browserfensterbreiten über 1001 Pixel, werden wir die E-Mail-Adresse buchstäblich an die Links anhängen. Hier kommt das HTML5-Datenattribut ins Spiel.

@media all and (min-width: 1001px) {
  #sidebar ul li a:after {
    content: " (" attr(data-email) ")";
    font-size: 11px;
    font-style: italic;
    color: #666;
  }
}

Bei sehr breiten Größen, über 1151 Pixel, fügen wir das Symbol wieder hinzu, wie wir es zuvor getan haben. Das Coole daran ist, dass wir kein zusätzliches Media-Query-Segment schreiben müssen, wir können einfach eine zusätzliche Media Query an unsere bereits vorhandene anhängen, indem wir ein Komma (verhält sich wie ein ODER-Operator) für die bereits geschriebene Abfrage mittlerer Breite verwenden.

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
  #sidebar ul li a {
    padding-left: 21px;
    background: url(../images/email.png) left center no-repeat;
  }
}

Alles zusammen

#sidebar ul li a {
  color: #900;
  text-decoration: none;
  padding: 3px 0; 
  display: block;
}

@media all and (min-width: 1001px) {
  #sidebar ul li a:after {
    content: " (" attr(data-email) ")";
    font-size: 11px;
    font-style: italic;
    color: #666;
  }
}

@media all and (max-width: 1000px) and (min-width: 700px) {
  #sidebar ul li a:before {
    content: "Email: ";
    font-style: italic;
    color: #666;
  }
}

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
  #sidebar ul li a {
    padding-left: 21px;
    background: url(../images/email.png) left center no-repeat;
  }
}

Video-Demo

Live-Demo / Download

Demo ansehen   Dateien herunterladen

Browser-Unterstützung

Die Browserunterstützung für Media Queries ist überraschend gut. Für die Abfragen in dieser speziellen Demo (die min und max Breiten nutzen) unterstützen die aktuellen Versionen von Firefox, Safari (einschließlich Mobile), Chrome und Opera alle. Internet Explorer 9 wird sie unterstützen, aber 8 und darunter nicht. Wenn ich die bestmögliche Erfahrung in IE 8 und darunter liefern wollte, würde ich es entweder mit JavaScript vortäuschen, wie ich es in diesem Artikel getan habe, oder ein IE-spezifisches Stylesheet verwenden und es im gleichen Stil wie die gängigste Browserbreite gemäß den Analysen gestalten.

Beachten Sie, dass die Erfahrungen bei einzelnen Abfragetypen variieren können. Zum Beispiel unterstützt das iPhone die Breitenabfragen, aber nicht die Orientierungsabfragen. Das iPad unterstützt beides.

Mehr über Media Queries

Die Messung der Breite ist ein gutes praktisches Beispiel für Media Queries, aber es ist nicht das Einzige, was verfügbar ist. Unten sind einige weitere Beispiele (keine vollständige Liste). Die Spezifikation listet noch viel mehr auf.

Typen

HTML4 hatte diese Medientypen, die alle noch gültig sind:aural, braille, handheld, drucken, projection, screen, tty, undtv. HTML5 kann mehr aufnehmen, wenn es benötigt wird. Die Spezifikation enthält „3d-glasses“, was großartig ist. DerallSchlüsselwort wird alle Typen ansprechen.

@media screen, projection { ... }

Abmessungen

Sie erhaltenheightundwidth, die gegen die aktuelle Höhe und Breite des Browserfensters abfragen. Sie könnten sie direkt verwenden, aber das wäre wahrscheinlich selten. Beide akzeptieren min/max-Präfixe, daher würden Sie sie häufiger alsmin-width, max-width, min-height, max-height.

Es gibt auchdevice-widthunddevice-height, die ebenfalls bietenmin-device-width, max-device-width, min-device-height, undmax-device-height.

@media (min-device-width: 640px) { ... }

Ausrichtung / Seitenverhältnis

Sie können auch das Seitenverhältnis des Bildschirms abfragen mitdevice-aspect-ratio.

@media screen and (device-aspect-ratio: 16/9) { ... }

Oder ob der Bildschirm im Hochformat (Höhe größer als Breite) oder Querformat (Breite größer als Höhe)modus ist.

@media (orientation:portrait) { ... }

Farbe

Sie können abfragen, ob der Bildschirm farbig ist oder nicht und Details dazu.

@media (color) { /* Screen is in color */ }

@media (min-color-index: 256) { /* Screen has at least 256 colors */ }

@media (monochrome) { /* Screen is monochrome */ }

Anderswo

Dies war in letzter Zeit ein heißes Thema. Sie können einige kluge Leute darüber reden hören auf The Big Web Show. Hier sind einige andere coole Verwendungen, die kürzlich aufgetaucht sind:

• Andy Clarke zeigt, wie mit zunehmender Zeilenlänge der Text lesbarer werden kann mit höherer Zeilenhöhe.
• Jon Hicks' Website ordnet sich neu an, um doppelte Seitenleisten, eine einzelne Seitenleiste oder keine Seitenleiste je nach verfügbarem Platz zu haben. Sie skaliert sich auch gut auf mobile Größen.
• Ethan Marcottes Demo für A List Apart verwendet keine Media Queries, zeigt aber andere Möglichkeiten, wie ein Design effektiv flexibel sein kann.
• Simon Collisons Website ordnet sein Raster neu an, um sich an verschiedene Browsergrößen anzupassen.
• Panic verwendet @media in ihren HTML-E-Mails, um sie in Desktop- oder mobilen E-Mail-Clients großartig aussehen zu lassen.