Mit CSS Media Queries kann die Darstellung einer Seite an die Bildschirmgröße, Auflösung, Ausrichtung und spezielle Endgeräte angepasst werden. Media Queries passen das Layout der Webseite durch sogenannte Breakpoints im CSS an Monitorklassen an. An den Breakpoints springt das Design um. Die Zuordnung der Style-Anweisungen oder eines Stylesheets zu einem Medium (z.B. Smartphone oder Tablet) erfolgt mit Hilfe von Medienabfragen. Hierbei wird ein Stylesheet zur Verarbeitung eingebunden, sobald bestimmte Kriterien erfüllt werden.
Mit Media Queries kann zum Beispiel folgendes ermittelt werden:
- Auflösung
- Ausrichtung (Hoch- oder Querformat)
- Breite und Höhe des Geräts
- Breite und Höhe des Browserfensters
War es früher noch nötig mit Hilfe von JavaScript die Bildschirmgröße der Benutzer zu ermitteln, so kann heutzutage alles über CSS Media Queries ermittelt und passende Anweisungen definiert werden. Insbesondere in Hinblick auf die Optimierung der Webseite für Mobile Endgeräte (Mobile SEO) spielen Media Queries eine wichtige Rolle, um eine bestmögliche Darstellung der Webseite bei verschiedenen Geräten und Auflösungen gewährleisten zu können.
Im Folgenden findest du eine Übersicht von Media Queries sowie eine kurze Einweisung in deren Aufbau und Funktionsweise.
Inhaltsverzeichnis:
- Media Queries: Medientypen und Medienmerkmale
- Die Syntax von Medienabfragen
- Standard Media Queries
- Media Queries für Smartphones
- Media Queries für Tablets
- Media Queries für Laptops
- Weiterführende Links
Media Queries: Medientypen und Medienmerkmale
Medienabfragen (Media Queries) bestehen aus einem Medientyp (z.B. Bildschirm oder Drucker), einem Medienmerkmal (z.B. Seitenverhältnis, Höhe oder Breite) oder einer Kombination aus beidem. Durch diese Kombinationsmöglichkeit können Stylesheets für eine Vielzahl von Ausgabemedien definiert werden.
Medienabfragen können überall dort verwendet werden, wo Styles definiert oder Stylesheets eingebunden werden, z.B. im Head-Bereich. Wenn das Endgerät alle Kriterien einer Medienabfrage erfüllt, werden die entsprechenden Styles angewendet.
Am häufigsten werden Media Queries dazu verwendet, um die Darstellung der Webseite für verschiedene Breiten anzupassen. Um dabei sicherstellen zu können, dass die Webseite sowohl am Desktop-PC, als auch am Notebook, Tablet oder Smartphone ordentlich dargestellt wird, muss im head-Bereich der Seite der Viewport definiert werden. Dies geschieht über folgenden Befehl:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Das <meta> Viewport Element gibt dem Browser die Anweisung, wie die Dimensionen und Skalierung der Seite gesteuert werden sollen. In obigem Beispiel also 100%.
Medientypen für Media Queries
Mit Hilfe von Medientypen (z.B. Bildschirm oder Drucker) werden CSS Anweisungen für bestimmte Ausgabegeräte definiert. Wenn keine Medienabfrage angegeben wird, gilt als Medientyp automatisch der Standardwert all.
| Wert | Ausgabemedium / Verwendung |
|---|---|
| all | alle Geräte-Typen (Media Types) |
| aural | Sprach- und Soundsynthesizer, z.B. Browser, die den Inhalt der Webseite vorlesen |
| braille | Geräte mit Braillezeile (Blindenschrift für stark Sehbehinderte und Blinde). Der Text der Webseite wird in die veränderte Oberflächenstruktur der Braillezeile umgewandelt. |
| embossed | Brailledrucker, die den Inhalt der Webseite in ertastbarer Blindenschrift ausgeben. |
| handheld | Handheld / Handgerät / Handcomputer, z.B. Palms, Pockets oder alte Mobiltelefone mit meist monochronen Bildschirmen. |
| Drucker | |
| projection | Projektoren (z.B. Beamer, Dia, usw.) |
| screen | Computer Bildschirme, Tablets, Smartphones usw. |
| speech | Screenreader, die den Inhalt der Webseite laut vorlesen. |
| tty | Ausgabemedien mit Festbreitenschrift / festen Zeichenrastern, wie Terminals oder Textbrowser |
| tv | Fernseher oder ähnliche Geräte |
Beispiele für die Anwendung von CSS Medientypen:
/* CSS Anweisungen für Drucker bzw. die Druckversion der Webseite */
@media print {
}
/* CSS Anweisungen Computer Bildschirme, Tablets, Smartphones usw. */
@media screen {
}
/* Kombinierte CSS Anweisungen */
@media screen, print {
}
Medienmerkmale für Media Queries
Medienmerkmale dienen der genaueren Definition und Eingrenzung von Ausgabegeräten – z.B. Bildschirme mit einer minimalen / maximalen Auflösung oder Mobilgeräte mit einer bestimmten Ausrichtung.
| Wert | Beschreibung |
|---|---|
| aspect-ratio | Das Verhältnis zwischen der Breite und der Höhe des Bildfensters |
| color | Die Anzahl der Bits pro Farbkomponente für das Ausgabegerät |
| color-index | Die Anzahl der Farben, die das Gerät anzeigen kann |
| device-aspect-ratio | Das Verhältnis zwischen der Breite und der Höhe des Gerätes |
| device-height | Die Höhe des Gerätes, z.B. eines Computer Bildschirms |
| device-width | Die Breite des Gerätes, z.B. eines Computer Bildschirms |
| grid | Grid oder Bitmap |
| height | Höhe der Anzeigefläche (Darstellungshöhe) |
| max-aspect-ratio | Das maximale Verhältnis zwischen der Breite und der Höhe der Anzeigefläche |
| max-color | Die maximale Anzahl von Bits pro Farbkomponente für das Ausgabegerät |
| max-color-index | Die maximale Anzahl der Farben, die das Gerät anzeigen kann |
| max‑device‑aspect‑ratio | Das maximale Verhältnis zwischen der Breite und der Höhe des Geräts |
| max-device-height | Die maximale Höhe des Gerätes, z.B. eines Computer Bildschirms |
| max-device-width | Die maximale Breite des Gerätes, z.B. eines Computer Bildschirms |
| max-height | Die maximale Höhe des Anzeigebereichs, beispielsweise ein Browser-Fenster |
| max-monochrome | Die maximale Anzahl von Bits pro "Farbe" auf einem monochromen (Graustufen) Display |
| max-resolution | Die maximale Auflösung des Gerätes, mit dpi oder dpcm |
| max-width | Die maximale Breite der Anzeigefläche, wie beispielsweise ein Browser-Fenster |
| min-aspect-ratio | Das minimale Verhältnis zwischen der Breite und der Höhe der Anzeigefläche |
| min-color | Die minimale Anzahl von Bits pro Farbkomponente für das Ausgabegerät |
| min-color-index | Die minimale Anzahl von Farben, die das Gerät anzeigen kann |
| min‑device‑aspect‑ratio | Das minimale Verhältnis zwischen der Breite und der Höhe des Gerätes |
| min-device-width | Die minimale Breite des Gerätes, z.B. eines Computer Bildschirms |
| min-device-height | Die minimale Höhe des Gerätes, z.B. eines Computer Bildschirms |
| min-height | Die minimale Höhe der Anzeigefläche, wie beispielsweise ein Browser-Fenster |
| min-monochrome | Die minimale Anzahl von Bits pro "Farbe" auf einem monochromen (Graustufen) Display |
| min-resolution | Die Mindestauflösung des Gerätes, mit dpi oder dpcm |
| min-width | Die minimale Breite der Anzeigefläche, wie beispielsweise ein Browser-Fenster |
| monochrome | Die Anzahl der Bits pro "Farbe" auf einem monochromen (Graustufen) Display |
| orientation | Die Ausrichtung des Ansichtsfensters (Hoch- oder Querformat) |
| overflow-block | Definiert, wie Inhalte behandelt werden, die entlang der Blockachse über den Bildausschnitt (Viewport) hinausragen. (in Media Queries v4 hinzugefügt) |
| overflow-inline | Definiert, ob Inhalte, die entlang der Inline- Achse über den Bildausschnitt hinausragen, scrollbar sind (in Media Queries v4 hinzugefügt) |
| resolution | Die Auflösung des Ausgabegeräts, mit dpi oder dpcm |
| scan | Der Scanvorgang des Ausgabegerätes |
| update-frequency | Definiert, wie schnell das Ausgabegerät das Aussehen des Inhalts verändern kann (in Media Queries v4 hinzugefügt) |
| width | Breite der Anzeigefläche (Darstellungsbreite) |
Beispiele für die Anwendung von CSS Medienmerkmalen:
/* CSS Merkmale für Geräte mit einer minimalen Breite */
@media only screen
and (min-width: 768px) {
}
/* CSS Merkmale für Geräte mit einer maximalen Breite */
@media only screen
and (max-width: 1024px) {
}
/* CSS Merkmale für die Ausgabe im Hochformat (Portrait) */
@media only screen
and (orientation: portrait) {
}
/* CSS Merkmale für die Ausgabe im Querformat (Landscape) */
@media only screen
and (orientation: landscape) {
}
/* Kombinierte CSS Merkmale */
@media only screen
and (min-width: 768px)
and (max-width: 1024px)
and (orientation: landscape) {
}
Die Syntax von Media Queries
Der Grundaufbau einer Medienabfrage ist simpel und wird im Folgenden anschaulich erklärt. Wie eingangs bereits erwähnt, besteht diese immer aus einem Medientyp (z.B. screen), einem Medienmerkmal (z.B. max-width) oder beides in Kombination.
| Bezeichnung | Code |
|---|---|
| Media Query | screen and (max-width: 700px) |
| Medientyp | screen and (max-width: 700px) |
| Verknüpfung | screen and (max-width: 700px) |
| Ausdruck | screen and (max-width: 700px) |
| Merkmal | screen and (max-width: 700px) |
| Wert | screen and (max-width: 700px) |
Standard Media Queries
Es macht grundsätzlich keinen Sinn, seine Webseite für jedes einzelne Endgerät anzupassen – der damit verbundene Aufwand würde ich keinem Verhältnis zum Nutzen stehen. Die folgenden Media Queries reichen bereits aus, um einen Großteil der möglichen Formate und Endgeräte abzudecken:
/* Smartphone Hochformat (Portrait) */
@media only screen
and (min-width: 320px)
and (max-width: 479px) {
}
/* Smartphone Querformat (Landscape) */
@media only screen
and (min-width: 480px)
and (max-width: 767px) {
}
/* Tablet Hochformat (Portrait) */
@media only screen
and (min-width: 768px)
and (max-width: 991px) {
}
/* Tablet Querformat (Landscape) - PC mit geringer Auflösung */
@media only screen
and (min-width: 992px)
and (max-width: 1199px) {
}
/* PC mit hoher Auflösung */
@media only screen
and (min-width: 1200px) {
}
Wenn es doch nötig sein sollte, die Webseite für ein bestimmtes Endgerät anzupassen, dann findest du nachfolgend eine Übersicht der Media Queries für die gängigsten Geräte (z.B. iPhone, iPad, Galaxy und Galaxy Tab).
Media Queries für Smartphones
Media Query Definitionen für die derzeitigen Platzhirsche im Smartphone Markt.
iPhones / iOS
/* ---------------------- iPhone 4 und 4S ---------------------- */
/* Hochformat (Portrait) und Querformat (Landscape) */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Hochformat (Portrait) */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Querformat (Landscape) */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* ---------------------- iPhone 5 und 5S ---------------------- */
/* Hochformat (Portrait) und Querformat (Landscape) */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Hochformat (Portrait) */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Querformat (Landscape) */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* ---------------------- iPhone 6 ---------------------- */
/* Hochformat (Portrait) und Querformat (Landscape) */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Hochformat (Portrait) */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Querformat (Landscape) */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* ---------------------- iPhone 6 Plus ---------------------- */
/* Hochformat (Portrait) und Querformat (Landscape) */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3) {
}
/* Hochformat (Portrait) */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 3) {
}
/* Querformat (Landscape) */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 3) {
}
Galaxy / Android Smartphones
/* ---------------------- Galaxy S3 ---------------------- */
/* Hochformat (Portrait) und Querformat (Landscape) */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2) {
}
/* Hochformat (Portrait) */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (orientation: portrait)
and (-webkit-device-pixel-ratio: 2) {
}
/* Querformat (Landscape) */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (orientation: landscape)
and (-webkit-device-pixel-ratio: 2) {
}
/* ---------------------- Galaxy S4 ---------------------- */
/* Hochformat (Portrait) und Querformat (Landscape) */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
}
/* Hochformat (Portrait) */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (orientation: portrait)
and (-webkit-device-pixel-ratio: 3) {
}
/* Querformat (Landscape) */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (orientation: landscape)
and (-webkit-device-pixel-ratio: 3) {
}
/* ---------------------- Galaxy S5 ---------------------- */
/* Hochformat (Portrait) und Querformat (Landscape) */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
}
/* Hochformat (Portrait) */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (orientation: portrait)
and (-webkit-device-pixel-ratio: 3) {
}
/* Querformat (Landscape) */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (orientation: landscape)
and (-webkit-device-pixel-ratio: 3) {
}
Media Queries für Tablets
Media Query Definitionen für die weit verbreitetsten Tablets im Markt.
iPad / iOS
/* ---------------------- iPad mini ---------------------- */
/* Hochformat (Portrait) und Querformat (Landscape) */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* Hochformat (Portrait) */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* Querformat (Landscape) */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* ---------------------- iPad 1. und 2. Generation ---------------------- */
/* Hochformat (Portrait) und Querformat (Landscape) */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* Hochformat (Portrait) */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* Querformat (Landscape) */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* ---------------------- iPad 3. und 4. Generation ---------------------- */
/* Hochformat (Portrait) und Querformat (Landscape) */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Hochformat (Portrait) */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Querformat (Landscape) */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
}
Galaxy / Android Tablets
/* ---------------------- Galaxy Tab 10.1 ---------------------- */
/* Hochformat (Portrait) und Querformat (Landscape) */
@media
(min-device-width: 800px)
and (max-device-width: 1280px) {
}
/* Hochformat (Portrait) */
@media
(max-device-width: 800px)
and (orientation: portrait) {
}
/* Querformat (Landscape) */
@media
(max-device-width: 1280px)
and (orientation: landscape) {
}
Media Queries für Laptops
Bei Laptops spielt vorrangig die Auflösung eine entscheidende Rolle. Insbesondere bei Retina Displays ist die Definition der Pixel-Ratio wichtig. Die Angabe min-device-pixel-ratio steht für das Verhältnis von CSS-Pixeln zu Gerätepixeln und wurde von Apple eingeführt. Diese Angabe ist für iOS notwendig.
/* ---------------------- Non-Retina Bildschirme ---------------------- */
@media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* ---------------------- Retina Bildschirme ---------------------- */
@media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (min-resolution: 192dpi)
and (-webkit-min-device-pixel-ratio: 2) {
}
Weiterführende Informationen zu Media Queries:
Fehlt noch etwas? Dann schreibt mir einfach :)