Media Queries sind ein CSS-Feature, das Webentwickler täglich nutzen. Media Queries sind die Basis von Responsive Design. Sie bestimmen, wie eine Website auf unterschiedlichen Bildschirmgrößen dargestellt wird. Ob auf dem großen Desktop-Monitor, dem Tablet auf der Couch oder dem Smartphone in der U-Bahn.
drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügenDas Prinzip ist einfach: Sie definieren Bedingungen, und der Browser wendet die zugehörigen Styles an, wenn diese Bedingungen erfüllt sind. Ist das Browserfenster schmaler als 768 Pixel? Dann blende die Sidebar aus. Druckt jemand die Seite? Dann verstecke die Navigation. Hat der Nutzer Dark Mode aktiviert? Dann zeig helle Schrift auf dunklem Hintergrund.
Responsive Styles für jedes Gerät. Die komplette Syntax auf einen Blick.
- width
- min-width
- max-width
- height
- aspect-ratio
- orientation
- hover
- pointer
- any-hover
- any-pointer
- prefers-color-scheme
- prefers-reduced-motion
- prefers-contrast
- resolution
- color
- color-gamut
- monochrome
Dieser Artikel erklärt, wie Media Queries funktionieren und wie Sie sie in der Praxis einsetzen.
Das Wichtigste in Kürze
- Media Queries sind CSS-Regeln, die nur unter bestimmten Bedingungen greifen
- Die Syntax besteht aus @media, Ausgabegerät (z.B. Bildschirm oder Print), Operatoren und Media Features
- Desktop First und Mobile First haben jeweils ihre eigenen Stärken und Schwächen
- Neben der Bildschirmbreite gibt es über 15 weitere Media Features für Orientierung, Farbschema oder Eingabemethode
- Ohne den Viewport-Meta-Tag funktioniert auf dem Smartphone gar nichts
Was sind Media Queries?
Eine Media Query ist eine Wenn-Dann-Regel. Sie schreiben eine Bedingung, und wenn der Browser diese Bedingung erfüllt sieht, wendet er die zugehörigen CSS-Regeln an.
Die Bedingung hier: Das Browserfenster ist maximal 768 Pixel breit. Die Konsequenz: Die Sidebar wird ausgeblendet. Wird das Fenster breiter als 768 Pixel, gilt die Bedingung nicht mehr. Die Sidebar erscheint wieder. Das passiert, wenn Sie das Browserfenster in der Größe verändern.
Wie ist eine Media Query aufgebaut?
Eine vollständige Media Query sieht so aus:
Fünf Bestandteile, jeder mit einer klaren Aufgabe:
@media leitet die Abfrage ein.
screen ist das Ausgabegerät. Es bestimmt, für welche Art von Gerät die Regel gilt. Die drei gängigen Typen:
| Medientyp | Gilt für |
|---|---|
| screen | Bildschirme |
| Drucker | |
| all | Alles (Standard) |
and verknüpft Bedingungen miteinander.
(min-width: 768px) ist das eigentliche Media Feature. Es fragt eine Eigenschaft ab und vergleicht sie mit einem Wert.
Die geschweiften Klammern umschließen die CSS-Regeln, die bei erfüllter Bedingung gelten sollen.
Welche Operatoren gibt es?
Bedingungen lassen sich kombinieren.
Das Komma wirkt wie ein „oder“:
not kehrt die Bedingung um:
Welche Media Queries gibt es?
Die Bildschirmbreite ist das meistgenutzte Feature. Aber Media Queries können weit mehr abfragen.
Wie frage ich Viewport und Dimensionen ab?
| Feature | Fragt ab |
|---|---|
| width, min-width, max-width | Breite des Browserfensters |
| height, min-height, max-height | Höhe des Browserfensters |
| aspect-ratio | Seitenverhältnis (z.B. 16/9) |
| orientation | Hoch- oder Querformat |
Die Liste der Media Features wächst. Wer noch einen Schritt weiter gehen will: Container Queries fragen nicht den Viewport ab, sondern auch das Elternelement.
Wie erkenne ich Maus, Touch oder Stift?
| Feature | Fragt ab |
|---|---|
| hover | Kann das Gerät hovern? (Maus vs. Touch) |
| pointer | Wie präzise ist das Eingabegerät? |
Wie frage ich die Nutzer-Einstellungen ab?
Diese Features respektieren die Systemeinstellungen des Nutzers:
| Feature | Fragt ab |
|---|---|
| prefers-color-scheme | Helles oder dunkles Farbschema |
| prefers-reduced-motion | Wunsch nach weniger Animationen |
| prefers-contrast | Wunsch nach höherem Kontrast |
Wie erkenne ich hochauflösende Displays?
| Feature | Fragt ab |
|---|---|
| resolution | Pixeldichte des Bildschirms |
| color | Farbfähigkeit |
| monochrome | Graustufen-Display |
Beide Ansätze führen zu responsiven Websites. Die Wahl hängt vom Projekt ab.
Sie starten mit dem Desktop-Layout und passen für kleinere Bildschirme an. Die Styles werden reduziert.
Sie starten mit dem Mobile-Layout und erweitern für größere Bildschirme. Die Styles werden ergänzt.
Was ist besser: Desktop First oder Mobile First?
Beide Ansätze haben ihre Berechtigung. Die Wahl hängt vom Projekt ab, nicht von einer Glaubensfrage.
Was spricht für Desktop First?
Sie gestalten zuerst die Desktop-Version und passen dann für kleinere Bildschirme an. Die Media Queries nutzen max-width:
Vorteile:
- Sie sehen sofort das vollständige Layout
- Entspricht dem Workflow vieler Designer, die zuerst Desktop-Mockups liefern
- Passt gut zu bestehenden CMS-Themes, die meist Desktop First gebaut sind
Nachteile:
- Mobile Geräte laden unter Umständen CSS, das sie gar nicht brauchen
- Sie müssen Elemente aktiv ausblenden oder verkleinern
Vom kleinsten Bildschirm zum großen Monitor: So funktioniert modernes Responsive Design
Starten Sie ohne Media Query. Die Grundstyles gelten für alle Geräte, optimiert für kleine Bildschirme.
.container {
width: 100%;
padding: 1rem;
}
Fügen Sie mit min-width-Queries Komplexität hinzu, sobald mehr Platz verfügbar ist.
.container {
max-width: 90%;
margin: 0 auto;
}
}
Auf großen Bildschirmen nutzen Sie den verfügbaren Platz für komplexere Layouts.
.container {
max-width: 1200px;
display: grid;
grid-template-columns: 1fr 3fr;
}
}
Die Kaskade arbeitet mit Ihnen: Jeder Breakpoint fügt neue Regeln hinzu, statt bestehende zu überschreiben. Das CSS bleibt schlanker und die Logik ist leichter nachvollziehbar.
Komplexe Desktop-Styles als Basis, die für Mobile mühsam wieder rückgängig gemacht werden müssen.
Schlanke Mobile-Basis, progressive Erweiterung für größere Screens. Bessere Performance, weniger CSS.
Was spricht für Mobile First?
Sie gestalten zuerst die mobile Version und erweitern dann für größere Bildschirme. Die Media Queries nutzen min-width:
Vorteile:
- Mobile Geräte laden nur das CSS, das sie brauchen
- Zwingt zur Priorisierung: Was ist wirklich wichtig?
- Entspricht Googles Mobile-First-Indexing
Nachteile:
- Das vollständige Layout sehen Sie erst bei größeren Viewports
- Wenn die Design-Vorlage Desktop-first ist, arbeiten Sie gegen den Strich
Welchen Ansatz wählen?
| Situation | Empfehlung |
|---|---|
| Neues Projekt ohne Vorgaben | Mobile First |
| Bestehendes CMS-Theme anpassen | So wie das Theme arbeitet |
| Design-Mockups sind Desktop-first | Desktop First |
| Performance auf Mobile ist kritisch | Mobile First |
| Mehrheit der Nutzer kommt vom Desktop | Desktop First |
Das Wichtigste: Bleiben Sie bei einem Ansatz. Wer min-width und max-width wild mischt, produziert schwer wartbaren Code.
Warum funktionieren meine Media Queries auf dem Smartphone nicht?
Die häufigste Ursache: Der Viewport-Meta-Tag fehlt. Ohne ihn behandeln mobile Browser Ihre Seite wie eine Desktop-Website und skalieren sie herunter.
Fügen Sie diesen Tag in den <head> Ihrer HTML-Datei ein:
Er sagt dem Browser: Nimm die tatsächliche Gerätebreite als Viewport, nicht eine simulierte Desktop-Breite.
Die meisten CMS wie WordPress fügen diesen Tag automatisch ein. Wenn Ihre Media Queries trotzdem nicht greifen, prüfen Sie als erstes, ob er vorhanden ist.
Welche Fehler passieren häufig?
Warum ist die Reihenfolge wichtig?
CSS wird von oben nach unten gelesen. Spätere Regeln überschreiben frühere. Bei Desktop First müssen die kleineren Breakpoints unten stehen, bei Mobile First die größeren.
Was passiert bei Lücken zwischen Breakpoints?
Wie gehe ich mit !important um?
Wenn das Theme !important verwendet, überschreiben Ihre Media Queries die Styles nicht. Sie müssen dann ebenfalls !important einsetzen.
Warum ist max-device-width veraltet?
max-device-width fragt die physische Bildschirmbreite ab, nicht die Viewport-Breite. Das Feature gilt als veraltet. Verwenden Sie stattdessen max-width.
Wie setze ich Breakpoints richtig?
Es gibt keine magischen Zahlen, die für jede Website funktionieren. Diese Werte aus gängigen Frameworks sind ein Startpunkt:
| Breakpoint | Typische Zielgeräte |
|---|---|
| 480px | Smartphones (Portrait) |
| 768px | Smartphones (Landscape), kleine Tablets |
| 1024px | Tablets, kleine Laptops |
| 1200px | Laptops, Desktop |
| 1400px | Große Monitore |
Der bessere Ansatz: Schauen Sie sich Ihr konkretes Layout an. Ziehen Sie das Browserfenster langsam schmaler. An welcher Stelle bricht das Design? Dort setzen Sie den Breakpoint.
Gerätenamen in Kommentaren sind keine gute Idee. „iPhone 14″ veraltet schnell. „Unter 400 Pixel“ bleibt verständlich.
Wie teste ich Media Queries?
Browser-DevTools
Alle modernen Browser bieten einen Device Mode. In Chrome: F12 drücken, dann auf das Smartphone-Symbol klicken. Sie können vordefinierte Geräte auswählen oder eigene Größen eingeben.
Echte Geräte
Emulatoren sind praktisch, aber sie zeigen nicht alles. Touch-Verhalten, Scrolling-Performance, Browser-Eigenheiten auf iOS oder Android: Das sehen Sie nur auf echten Geräten.
Mindestens ein iPhone und ein Android-Gerät sollten Sie zur Hand haben. Tablets sind seltener geworden, aber wenn Ihre Zielgruppe sie nutzt, testen Sie auch dort.
Der Fenster-Trick
Ziehen Sie Ihr Browserfenster langsam von breit nach schmal. Achten Sie auf Stellen, an denen das Layout springt oder Elemente überlappen. Dort stimmt etwas nicht.
Wie füge ich Media Queries in WordPress ein?
WordPress bietet mehrere Wege, eigenes CSS hinzuzufügen. Die meisten modernen WordPress-Themes sind bereits responsive und bringen eigene Breakpoints mit. Wenn Sie diese anpassen oder erweitern wollen, haben Sie drei Möglichkeiten.
Über den Customizer
Der einfachste Weg: Im WordPress-Backend unter Design → Customizer → Zusätzliches CSS können Sie eigene Regeln eintragen. Sie überschreiben das Theme-CSS und bleiben bei Updates erhalten.
Wie arbeite ich mit einem Child-Theme?
Für umfangreichere Anpassungen legen Sie ein Child-Theme an. In dessen style.css schreiben Sie Ihre Media Queries. Das ist sauberer und übersichtlicher als alles in den Customizer zu packen.
Wie nutze ich den Block-Editor für Media Queries?
Einzelnen Blöcken können Sie CSS-Klassen zuweisen. Diese Klassen stylen Sie dann in Ihrem eigenen CSS inklusive Media Queries.
Syntax, Ausgabegeräte, Operatoren und alle Media Features
| Feature | Kategorie | Werte / Beispiel |
|---|---|---|
| width / min-width / max-width | 768px, 100vw, 50em | |
| height / min-height / max-height | 600px, 100vh | |
| aspect-ratio | 16/9, 4/3, 1/1 | |
| orientation | portrait | landscape | |
| resolution | Display | 72dpi, 150dpi, 2dppx |
| color | Farbe | Bits pro Farbkanal |
| color-gamut | Farbe | srgb | p3 | rec2020 |
| hover | Interaktion | hover | none |
| pointer | Interaktion | fine | coarse | none |
| prefers-color-scheme | Präferenz | light | dark |
| prefers-reduced-motion | Präferenz | reduce | no-preference |
| prefers-contrast | Präferenz | more | less | no-preference |
Glossar: 12 Fachbegriffe zu Media Queries
@media
@media ist das Schlüsselwort, das eine Media Query einleitet. Es steht immer am Anfang der Regel und signalisiert dem Browser, dass eine bedingte CSS-Anweisung folgt.
Breakpoint
Ein Breakpoint ist die Stelle, an der das Layout wechselt. Bei 768 Pixel verschwindet die Sidebar, bei 1024 Pixel werden aus zwei Spalten drei. Der Begriff meint sowohl den Pixel-Wert als auch den konzeptionellen Punkt im Design.
Desktop First
Desktop First ist ein Entwicklungsansatz: Sie gestalten zuerst die Desktop-Version und passen dann mit max-width-Queries für kleinere Bildschirme an.
Media Feature
Ein Media Feature ist die Eigenschaft, die Sie in einer Media Query abfragen. Beispiele: width, orientation, prefers-color-scheme. Manche Features wie width akzeptieren Werte, andere wie hover sind binär.
Media Type
Der Media Type grenzt ein, für welche Geräteklasse eine Regel gilt. Die drei relevanten Typen heute: screen für Bildschirme, print für Drucker, all für beide.
Mobile First
Mobile First ist ein Entwicklungsansatz: Sie gestalten zuerst die mobile Version und erweitern dann mit min-width-Queries für größere Bildschirme.
Operator
Operatoren verknüpfen Bedingungen in Media Queries. and verlangt, dass alle Bedingungen erfüllt sind. Das Komma wirkt als „oder“. not kehrt die Bedingung um.
prefers-color-scheme
prefers-color-scheme ist ein Media Feature, das die Farbschema-Einstellung des Betriebssystems abfragt. Mögliche Werte: light und dark.
prefers-reduced-motion
prefers-reduced-motion ist ein Media Feature für Barrierefreiheit. Es erkennt, ob der Nutzer in seinen Systemeinstellungen reduzierte Animationen wünscht.
Responsive Design
Responsive Design bezeichnet Webseiten, die sich an verschiedene Bildschirmgrößen anpassen. Media Queries sind das technische Werkzeug, das dies ermöglicht.
Viewport
Der Viewport ist der sichtbare Bereich der Website im Browser. Seine Breite und Höhe bilden die Grundlage für die meisten Media Queries.
Viewport-Meta-Tag
Der Viewport-Meta-Tag ist ein HTML-Element im <head>, das mobilen Browsern sagt, wie sie die Seite skalieren sollen. Ohne ihn funktionieren Media Queries auf Smartphones nicht zuverlässig.
FAQ
Was ist der Unterschied zwischen min-width und max-width?
min-width gilt ab einer bestimmten Breite aufwärts. max-width gilt bis zu einer bestimmten Breite. Ein 800 Pixel breites Fenster erfüllt sowohl min-width: 600px als auch max-width: 1000px. Welches Sie nutzen, hängt davon ab, ob Sie Mobile First oder Desktop First arbeiten.
Kann ich Media Queries auch für die Höhe nutzen?
Ja. Die Features height, min-height und max-height funktionieren wie ihre Breiten-Pendants. In der Praxis werden sie seltener gebraucht, weil Nutzer vertikales Scrollen gewohnt sind. Für Fullscreen-Elemente oder Sticky-Header können sie aber sinnvoll sein.
Wie erkenne ich, ob ein Gerät Touch unterstützt?
Mit den Media Features hover und pointer. hover: none bedeutet, dass das Gerät keinen Hover-Zustand kennt, also wahrscheinlich ein Touchscreen ist. pointer: coarse bedeutet, dass der Zeiger unpräzise ist, also ein Finger statt einer Maus. Beide Features lassen sich kombinieren.
Warum funktionieren meine Media Queries im Internet Explorer nicht?
Grundlegende Media Queries funktionieren ab Internet Explorer 9. Neuere Features wie prefers-color-scheme oder hover werden nicht unterstützt. Da Microsoft den IE 2022 eingestellt hat, lohnt sich der Aufwand für Workarounds nur noch bei sehr speziellen Projekten.
Soll ich Breakpoints in Pixel oder em angeben?
Beides funktioniert. Pixel sind intuitiver, em skalieren mit der Schriftgröße des Nutzers. Die meisten Frameworks verwenden Pixel. Wichtiger als die Einheit ist, dass Sie innerhalb eines Projekts konsistent bleiben.
Wie viele Breakpoints brauche ich?
Drei bis fünf reichen für die meisten Websites. Jeder zusätzliche Breakpoint erhöht den Wartungsaufwand. Setzen Sie Breakpoints dort, wo Ihr Layout tatsächlich bricht, nicht bei theoretischen Gerätegrößen.
11 Kommentare
Also auf meinem Android telefon mit standardbrowser sehe ich manchmal noch die ganz normale seite… scheint doch nicht so ganz zu klappen.
@ Gotisch: ja, im querformat sieht man die normale Ansicht – ist aber auch gut so, weil der Screen ja breiter ist als die angegebenen 480px.
Auf der Seite gibts allerdings ein paar Fehler, wenn man die Seite im Querformat löd und dann ins hochformat wechselt und umgekehrt. Das liegt aber an dem verwendeten javascript-code und nicht direkt an den media queries.
MfG
ScaraX
Daaaanke 🙂
Hab vor kurzem erst mit einem Kumpel darüber diskutiert, ob man denn nicht für die mobilen Browser seine Webseite mit einfachen Dingen gleich etwas verbesser kann.
Ein paar div’s weniger sollten es sein – genügt schon. Die die eh nicht so wichtig sind (Werbung, etc) einfach ausblenden.
Ich dachte da sofort auch an die media tags, man kennt das ja vom drucken her.
Aber auch er meinte, dass das per media tags wohl nicht geht.
Jedes Phone hat ja auch seine eigene Auflösung.
Wieder was gelernt – das machma *ggg* 😉
Proto Fluid ist kein verläßliches Tool. Es nimmt ja nicht einmal den User Agent des Gerätes an, das es simuliert (machen leider die wenigsten Simulatoren), weswegen es auch Mobileseite grundsetzlich gar nicht erkennt. Auch Media Queries liest es falsch aus. Proto Fluid ist nicht mehr als ein skalierbarer Bilderrahmen, der etwas völlig anderes darstellt als das reale Gerät.
Media-Queries scheinen sehr mächtig zu sein. Aber heutzutage muss es doch sicher eine einfachere Lösung geben? Ich meine eine separate Seite erstellen lassen um nicht den ganzen Code in der normalen Homepage verändern zu müssen. Oder?
@Elias: Aber hier geht es doch genau um den Programmier-Ansatz einer mobilen Version einer Website 😉 Aber nach kurzem Suchen bin auch http://www.mobilonso.com gestossen. Ich denke das ist doch so etwas wonach du suchst, hoffentlich.
Das ganze nochmal, offenbar wird hier das größer/kleiner-Zeichen nicht gemocht. Muss man dann selbst hinzufügen:
Das ganze ist gut und schön, man muss aber bedenken: Wenn man PHP einsetzt, wird der PHP-Code dann ausgeführt, wenn man Variablen Werte zuweist, und zwar auch dann, wenn man den Code in einem Bereich definiert, den man per media queries eigentlich ausgeschlossen hat
Als Beispiel die Datei weiche.php:
html
head
link rel=“stylesheet“ type=“text/css“ href=“weiche.css“
/head
body
?
$grosser_bildschirm=’Leerstring‘;
?
div id=’kleinerbildschirm‘
? echo „php wird ausgefuehrt“; $grosser_bildschirm=’Wert wurde geaendert‘; ?
/div
?
echo $grosser_bildschirm;
?
/body
/html
Die CSS-Datei wäre:
#kleinerbildschirm
{
font-weight:bold;
}
@media only screen and (min-width: 1024px) {
#kleinerbildschirm {
display:none;
}
}
Wenn man nun weiche.php lädt und das Fenster größer/kleiner zieht, sieht man, dass der Wert für $grosser_bildschirm in jedem Fall geändert wird, das echo wird aber nur ausgegeben, wenn die Bildschirmbreite kleiner 1024 ist.
Hallo, danke für das Tutorial. Kann man das zentral über ein CSS Stylesheet regeln? Das man erst ein zentrales CSS Sheet lädt und dann je nach Endgerät das entsprechende Sheet gewählt wird?
if mobile mobile.css else desktop.css
So in der Art, ich hoffe Ihr versteht was ich meine. Danke.
Ich kenne das Problem Elias, habe mich durch divere Foren und Berichte gekämpft aber dann aufgegeben 😉 Wir haben nun eine Lösung für unseren Gastrobetrieb von http://mobileview.ch , soweit sehr gut. Bin sicher es gibt verschiedenste Anbieter solcher Lösungen. Mobilonso habe ich mir auch angeschaut, aber dann für eine Lösung im eigenen Land entschieden ;-).
Ja, so ist es. Genaugenommen sind mir auch keine anderen Emulatoren bekannt, welche die Darstellung auf der echten Hardware halbwegs realistisch zeigen. Ist ja auch klar, denn es fehlen Aspekte wie z. B. die jeweilige Pixeldichte und die diversen Macken der verschiedenen Mobilbrowser-/Mobilbetriebssystemversionen.
Wie auch immer, diesen Artikel sah ich auch schon in der engl. Originalversion. Er wurde offensichtlich stumpf übersetzt, anscheinend von jemandem ohne Sachverstand bzgl. dieser Materie. Ohnehin scheint es mir bei IT-Blogs nicht selten ähnlich zu sein wie bei den Reiseführern – viele schreiben voneinander ab bzw. offerieren mit einigen Formulierungsumstellungen lediglich alten Wein in neuen Schläuchen. So kann man dann den immer gleichen Unsinn wie die Empfehlung unbrauchbarer Emulatoren gleich tausendfach lesen. Seit die „VG Wort“ auch Online-Artikel vergüten muss (Anmeldung vorausgesetzt, mindestens 1.500 Worte und 1.500 Clicks jährlich), liegt die Motivation zur Veröffentlichung von noch mehr Müllcontent halt sehr hoch – Hauptsache, es wird häufig genug aufgerufen.
Und auch sonst bietet dieser Artikel im Übrigen keinerlei neue Infos.
Werter Andreas! Es gibt neben Müllcontent auch Müllkommentare. Deiner ist ein Paradebeispiel dafür. Anders als du will ich aber gerne begründen, warum ich das so sehe:
Diese Übersetzung hier ist eine Übersetzung eines Artikels von Rachel Andrew, der zuerst auf unserem Familienmitglied Smashing Magazine erschien und dann von Manuela Müller (seinerzeit tätig für die Smashing Media) für Dr. Web übersetzt wurde. Wir schreiben unseren Content nicht von irgendwo ab. Es dürfte allerdings nicht verwundern, dass dieser Artikel dem Original keinerlei neue Infos beifügt. Zu guter Letzt gilt es noch zu berücksichtigen, dass der Beitrag vier Jahre alt ist und gerade bezogen auf die mobile Entwicklung aus heutiger Sicht logischerweise alles andere als Top of the Pops ist.