Media Queries
Links[Bearbeiten]
http://wiki.selfhtml.org/wiki/CSS/Media_Queries
Überblick[Bearbeiten]
Mit Media Queries kann man die Darstellung einer HTML Seite für verschiedene Ausgabemedien optimieren.
Beispiel HTML:
<link rel="stylesheet" href="bildschirm-stylesheet.css" media="screen"> <link rel="stylesheet" href="druck-stylesheet.css" media="print">
Ohne Angabe des media Attributes gilt der Standardwert "all".
Auch innerhalb der CSS Datei läßt sich dies verwenden: Beispiel CSS:
/* CSS-Regeln für alle Ausgabegeräte */
@media print {
/* zusätzliche CSS-Regeln für Drucker */
}
Medienmerkmale[Bearbeiten]
(Schlüsselwort):optional Längenangabe oder neues Schlüsselwort
Ein Medienmerkmal wird notiert, indem innerhalb von runden Klammern ein Schlüsselwort notiert wird. Diesem Schlüsselwort folgt optional ein Doppelpunkt sowie eine Längenangabe oder ein weiteres Schlüsselwort.
Notation[Bearbeiten]
Beispiel vollständige Notation
(orientation: landscape)
Beispiel kurze Notation
(color)
Das Ausgabegerät soll Farbe darstellen können
Zusätzlich gibt es bei manchen Merkmalen Präfixe
min- max-
Beispiel:
min-width
Gruppierung und Kombination[Bearbeiten]
Dies entspricht einer "oder" bzw. "und" Abfrage. Mithilfe von Kommas werden Bedingungen getrennt, von denen mindestens eine zutreffen soll. Mit and werden Bedingungen getrennt die alle zutreffen sollen.
@media print, embossed { /* Formate für Printmedien. */ }
@media (min-width: 30em) and (max-width: 60em) { /* Kompaktes Layout */ }
@media print and (color), screen and (color), screen and (three-dee) { /* Farbangaben */ }
Wenn das Merkmal nicht bekannt ist (three-dee) gibt es nicht ;-) wird es ignoriert.
Mit only kann man Definitionen in Media Queries verstecken, die keine Media Queries verstehen.
@media only all and (min-width: 50em) { /* Layout */ }
Ohne das Schlüsselwort only würden die Angaben in den geschweiften Klammern von allen Browsern ausgeführt die keine Media Queries verstehen.
Mit not wird die Abfrage verneint:
@media not all and (monochrome) { /* Farben */ }
Bedeutet: NICHT „ Alle Medientypen mit Graustufendarstellung“ -> also alle die mit Farbe umgehen können
Merkmale mit Beispielen[Bearbeiten]
Aus selfhtml.org
width[Bearbeiten]
CSS 3.0 IE 9 Firefox 3.5 Opera 9.50 Safari 4.0 Chrome 4
@media (width: 60em) { /* Breite entspricht genau 60em */ }
@media (min-width: 50em) { /* Breite beträgt mindestens 50em */ }
@media (max-width: 70em) { /* Breite beträgt höchstens 70em */ }
height[Bearbeiten]
CSS 3.0 IE 9 Firefox 3.5 Opera 9.50 Safari 4.0 Chrome 4 Das Merkmal height (Höhe) beschreibt bei fortlaufenden Medien die Höhe des Anzeigebereichs (Viewport) und bei paginierten Medien die Höhe einer Seite.
Abgefragter Wert: Eine positive Längenangabe.
Betrifft: sichtbare und fühlbare Medien.
Die Präfixe min- und max- sind erlaubt.
Die Anwendung erfolgt analog zum Merkmal width.
device-width[Bearbeiten]
CSS 3.0IE 9Firefox 3.5Opera 9.50Safari 4.0Chrome 4
Breite des Ausgabegerätes, z.B. Breite eines Bildschirms in Pixel. Beispiel
@media (device-width: 800px) { /* Breite entspricht genau 800 Pixel */ }
@media (min-device-width: 800px) { /* Breite beträgt mindestens 800px */ }
@media (max-device-width: 1024px) { /* Breite beträgt höchstens 1024px */ }
Beachten Sie: Auch wenn ein Ausgabegerät bestimmte Abmessungen besitzt, sagt das nichts darüber aus, ob der verfügbare Bereich auch verwendet wird.
device-height[Bearbeiten]
CSS 3.0IE 9Firefox 3.5Opera 9.50Safari 4.0Chrome 4
Höhe des Ausgabebereichs, z.B. Höhe eines Bildschirms in Pixel.
Die Anwendung erfolgt analog zum Merkmal device-width.
orientation[Bearbeiten]
CSS 3.0IE 9Firefox 3.5Opera 10.0Safari 4.0Chrome 4
Seitenformat eines Ausgabemediums. Die Orientierung entspricht dem Wert landscape (Querformat), wenn der Wert des Merkmals width größer ist als der Wert des Merkmals height. Andernfalls entspricht die Orientierung dem Wert portrait (Hochformat).
abgefragter Wert: Eines der Schlüsselwörter portrait oder landscape
betrifft: Bitmap-Medientypen.
Beispiel
@media (orientation: portrait) { /* Formate für hochformatige Ausgabemedien */ }
Beachten Sie: Internet Explorer, Safari und Chrome erkennen bisher (Stand Juli 2011) die Kurzschreibweise (orientation) nicht. Sie sollten dieses Merkmal daher nur in Verbindung mit einem der vorgegebenen Schlüsselwörter verwenden.
aspect-ratio[Bearbeiten]
CSS 3.0IE 9Firefox 3.5Opera 10.0Safari 4.0Chrome 4 Das Merkmal aspect-ratio (Seitenverhältnis) beschreibt das Verhältnis des Merkmals width zum Merkmal height.
abgefragter Wert: Ein Verhältniswert.
betrifft: Bitmap-Medientypen.
Beispiel
@media (aspect-ratio: 4/3) { /* Fall 1 */ }
@media (min-aspect-ratio: 4/3) { /* Fall 2 */ }
@media (max-aspect-ratio: 4/3) { /* Fall 3 */ }
In diesem Beispiel wird der Verhältniswert 4/3 den Varianten des aspect-ratio-Merkmals zugewiesen. Das Stylesheet wird verarbeitet, wenn das Seitenverhältnis des Anzeigebereichs (Viewport) genau 4 zu 3 entspricht (Fall 1). Das ist z.B. bei einem Anzeigebereich von 492 zu 369 Pixel der Fall. Das Stylesheet in Fall 2 wird angewendet, wenn das Seitenverhältnis 4/3 oder höher (z.B. 5/3 oder 6/3) beträgt. Im Fall 3 wird das Stylesheet entsprechend nur verarbeitet, wenn das Seitenverhältnis 4/3 oder geringer ist (z.B. 2/3 oder 1/3).
device-aspect-ratio[Bearbeiten]
CSS 3.0IE 9Firefox 3.5Opera 9.50Safari 4.0Chrome 4
Das Merkmal device-aspect-ratio (Geräte-Seitenverhältnis) beschreibt das Verhältnis des Merkmals device-width zum Merkmal device-height.
Die Anwendung erfolgt analog zum Merkmal aspect-ratio.
color[Bearbeiten]
CSS 3.0IE 9Firefox 3.5Opera 10.0Safari 4.0Chrome 4 Anzahl der Bits, die ein Gerät pro Farbkomponente (z.B. Rot, Grün oder Blau) verwendet.
Kann das Ausgabegerät keine Farben anzeigen, ist der Wert 0 (Null) zutreffend. Wird für verschiedene Farbkomponenten eine unterschiedliche Anzahl an Bits verwendet, so zählt die niedrigste verwendete Bit-Anzahl des Geräts.
abgefragter Wert: Eine nicht negative Zahl.
betrifft: sichtbare Medientypen.
Beispiel
@media (color: 2) { /* Einfaches Farblayout */ }
@media (min-color: 3) { /* Komplexes Farblayout */ }
@media (max-color: 2) { /* Einfaches Farblayout */ }
color-index[Bearbeiten]
CSS 3.0IE 9Firefox 3.5Opera 10.0Safari 4.0Chrome 4
Das Merkmal color-index (Farbindex) beschreibt die Anzahl der Farbdefinitionen in der Farbtabelle des Ausgabemediums. Verfügt das Medium nicht über eine Farbtabelle ist der Wert 0 (Null) zutreffend. Üblicherweise besitzen nur Medien eine Farbtabelle, deren Farbfähigkeit eingeschränkt ist.
abgefragter Wert: Eine positive Zahl.
@media (color-index: 16) { /* genau 16 Farben stehen zur Verfügung */ }
@media (min-color-index: 20) { /* Mindestens 20 Farben stehen zur Verfügung */ }
@media (max-color-index: 256) { /* Höchstens 256 Farben stehen zur Verfügung */ }
Beachten Sie: Einzig der Opera Browser gibt an, eine Farbtabelle zu verwenden.
Beachten Sie: Safari und Chrome verstehen die Präfixe min- und max- dieses Merkmals nicht.
monochrome[Bearbeiten]
CSS 3.0IE 9Firefox 3.5Opera 10.0Safari 4.0Chrome 4
Das Merkmal monochrome (schwarz-weiß) beschreibt die Anzahl der Bits, die zur Beschreibung eines schwarz-weiß-Farbtons verwendet werden. Handelt es sich nicht um ein Gerät, das nur Graustufen darstellen kann (sondern auch Farben), ist der Wert 0 (Null) zutreffend.
abgefragter Wert: eine positive Zahl.
Beispiel
@media (monochrome: 1) { /* nur schwarz und weiß stehen zur Verfügung */ }
@media (min-monochrome: 4) { /* Mindestens 16 Graustufen stehen zur Verfügung */ }
@media (max-monochrome: 8) { /* Höchstens 256 Graustufen stehen zur Verfügung */ }
resolution[Bearbeiten]
CSS 3.0IE 9Firefox 3.5Opera 10.0 Das Merkmal resolution (Auflösung) beschreibt die Auflösung, also die Dichtigkeit der Bildpunkte auf einem Ausgabemedium. Besitzt das verwendete Ausgabemedium keine rechteckigen Bildpunkte (beispielsweise Drucker), so kann das Merkmal nur in Verbindung mit einem Präfix verwendet werden.
In diesem Fall prüfen Abfragen mit min-resolution die geringstmögliche, Abfragen mit max-resolution die höchstmögliche Dichtigkeit der Bildpunkte des Ausgabemediums ab.
abgefragter Wert: Eine Auflösung.
betrifft: Bitmap-Medientypen.
Beispiel
@media (resolution: 96dpi) { /* Die Auflösung beträgt 96 Bildpunkte pro Zoll */ }
@media (min-resolution: 200dpcm) { /* Die Auflösung beträgt mindestens 200 Punkte pro Zentimeter */ }
@media (max-resolution: 300dpi) { /* Die Auflösung beträgt höchstens 300 Punkte pro Zoll */ }
scan[Bearbeiten]
CSS 3.0IE 9Firefox 3.5Opera 10.0Safari 4.0Chrome 4
Das Merkmal scan (Abtasten) beschreibt den Bildaufbau von Ausgabegeräten des Typs tv. Dieser kann progressiv erfolgen, das entspricht etwa dem Bildaufbau auf einem Computerbildschirm, dann trifft der Wert progressive zu, oder mit Hilfe von Zeilenbildung (d.h. einzelne Bildzeilen werden nach und nach dargestellt), dann trifft der Wert interlace zu.
abgefragter Wert: Eines der Schlüsselwörter progressive oder interlace
betrifft: Medientyp tv
Beispiel
@media (scan: progressive) { /* Bildschirmlayout */ }
Beachten Sie: Der Internet Explorer erkennt bisher (Stand Juli 2011) die Kurzschreibweise (scan) nicht. Es ist stattdessen erforderlich, die ausführliche Schreibweise zu notieren.
grid[Bearbeiten]
CSS 3.0Firefox 3.5Opera 10.0Safari 4.0Chrome 4
Das Merkmal grid (Raster) beschreibt die Rastereigenschaft von Ausgabemedien. Bei Ausgabegeräten, die Inhalte in einem Raster darstellen, trifft der Wert Eins (1) zu, andernfalls der Wert Null (0).
abgefragter Wert: Eine Zahl (Null oder Eins).
betrifft: sichtbare und fühlbare Medientypen
Beispiel
@media (grid: 0) { /* Zahlreiche Schriftformatierungen */ }
Beispiele[Bearbeiten]
HTML
<link rel="stylesheet" href="kompakt.css" media="(orientation: portrait)"> <style type="text/css" media="(color)"><!-- Farbangaben. --></style> @import 'layout.css' (min-width: 50em); <!-- em bezieht sich auf die Standartschriftgröße des Browsers -->
CSS
Media Queries for full height Layout[Bearbeiten]
Sometime theres a problem with Safari iOS Toolbar because it's overlapping your Layout.
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
.foo {
height: 1024px;
}
}
/* iPad with landscape orientation. */
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) {
.foo {
height: 768px;
}
}
/* iPhone 5
You can also target devices with aspect ratio. */ @media screen and (device-aspect-ratio: 40/71) {
.foo {
height: 500px;
}
}
