Skip to content
CSS Media Queries

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

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.

Responsive Webdesign mit Media Queries
CSS Media Queries sorgen für eine optimale Darstellung der Webseite auf allen Endgeräten (PC, Laptop, Tablet, Smartphone)

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.

WertAusgabemedium / Verwendung
allalle Geräte-Typen (Media Types)
auralSprach- und Soundsynthesizer, z.B. Browser, die den Inhalt der Webseite vorlesen
brailleGeräte mit Braillezeile (Blindenschrift für stark Sehbehinderte und Blinde). Der Text der Webseite wird in die veränderte Oberflächenstruktur der Braillezeile umgewandelt.
embossedBrailledrucker, die den Inhalt der Webseite in ertastbarer Blindenschrift ausgeben.
handheldHandheld / Handgerät / Handcomputer, z.B. Palms, Pockets oder alte Mobiltelefone mit meist monochronen Bildschirmen.
printDrucker
projectionProjektoren (z.B. Beamer, Dia, usw.)
screenComputer Bildschirme, Tablets, Smartphones usw.
speechScreenreader, die den Inhalt der Webseite laut vorlesen.
ttyAusgabemedien mit Festbreitenschrift / festen Zeichenrastern, wie Terminals oder Textbrowser
tvFernseher 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.

WertBeschreibung
aspect-ratioDas Verhältnis zwischen der Breite und der Höhe des Bildfensters
colorDie Anzahl der Bits pro Farbkomponente für das Ausgabegerät
color-indexDie Anzahl der Farben, die das Gerät anzeigen kann
device-aspect-ratioDas Verhältnis zwischen der Breite und der Höhe des Gerätes
device-heightDie Höhe des Gerätes, z.B. eines Computer Bildschirms
device-widthDie Breite des Gerätes, z.B. eines Computer Bildschirms
gridGrid oder Bitmap
heightHöhe der Anzeigefläche (Darstellungshöhe)
max-aspect-ratioDas maximale Verhältnis zwischen der Breite und der Höhe der Anzeigefläche
max-colorDie maximale Anzahl von Bits pro Farbkomponente für das Ausgabegerät
max-color-indexDie maximale Anzahl der Farben, die das Gerät anzeigen kann
max‑device‑aspect‑ratioDas maximale Verhältnis zwischen der Breite und der Höhe des Geräts
max-device-heightDie maximale Höhe des Gerätes, z.B. eines Computer Bildschirms
max-device-widthDie maximale Breite des Gerätes, z.B. eines Computer Bildschirms
max-heightDie maximale Höhe des Anzeigebereichs, beispielsweise ein Browser-Fenster
max-monochromeDie maximale Anzahl von Bits pro "Farbe" auf einem monochromen (Graustufen) Display
max-resolutionDie maximale Auflösung des Gerätes, mit dpi oder dpcm
max-widthDie maximale Breite der Anzeigefläche, wie beispielsweise ein Browser-Fenster
min-aspect-ratioDas minimale Verhältnis zwischen der Breite und der Höhe der Anzeigefläche
min-colorDie minimale Anzahl von Bits pro Farbkomponente für das Ausgabegerät
min-color-indexDie minimale Anzahl von Farben, die das Gerät anzeigen kann
min‑device‑aspect‑ratioDas minimale Verhältnis zwischen der Breite und der Höhe des Gerätes
min-device-widthDie minimale Breite des Gerätes, z.B. eines Computer Bildschirms
min-device-heightDie minimale Höhe des Gerätes, z.B. eines Computer Bildschirms
min-heightDie minimale Höhe der Anzeigefläche, wie beispielsweise ein Browser-Fenster
min-monochromeDie minimale Anzahl von Bits pro "Farbe" auf einem monochromen (Graustufen) Display
min-resolutionDie Mindestauflösung des Gerätes, mit dpi oder dpcm
min-widthDie minimale Breite der Anzeigefläche, wie beispielsweise ein Browser-Fenster
monochromeDie Anzahl der Bits pro "Farbe" auf einem monochromen (Graustufen) Display
orientationDie Ausrichtung des Ansichtsfensters (Hoch- oder Querformat)
overflow-blockDefiniert, wie Inhalte behandelt werden, die entlang der Blockachse über den Bildausschnitt (Viewport) hinausragen. (in Media Queries v4 hinzugefügt)
overflow-inlineDefiniert, ob Inhalte, die entlang der Inline- Achse über den Bildausschnitt hinausragen, scrollbar sind (in Media Queries v4 hinzugefügt)
resolutionDie Auflösung des Ausgabegeräts, mit dpi oder dpcm
scanDer Scanvorgang des Ausgabegerätes
update-frequencyDefiniert, wie schnell das Ausgabegerät das Aussehen des Inhalts verändern kann (in Media Queries v4 hinzugefügt)
widthBreite 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.

BezeichnungCode
Media Queryscreen and (max-width: 700px)
Medientypscreen and (max-width: 700px)
Verknüpfungscreen and (max-width: 700px)
Ausdruckscreen and (max-width: 700px)
Merkmalscreen and (max-width: 700px)
Wertscreen 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 :)

4.3/5 - (24 votes)
An den Anfang scrollen