Media Queries
Was sind Media Queries?
Media Queries sind bedingte CSS-Regeln, mit denen eine Website ihr Layout an Eigenschaften des Ausgabegeräts oder Browsers anpasst. Je nach Breite, Höhe, Ausrichtung, Auflösung oder Nutzereinstellung gelten andere Formatierungen. Dadurch bildet derselbe HTML-Inhalt auf Smartphones, Tablets, Desktop-Bildschirmen und Druckseiten unterschiedliche Darstellungen ab.
Media Queries, auf Deutsch einmalig als Medienabfragen bezeichnet, verbinden CSS-Regeln mit überprüfbaren Bedingungen. Der Browser wertet diese Bedingungen aus und wendet einen Regelblock nur an, wenn sie erfüllt sind. Media Queries bilden damit eine technische Grundlage des Responsive Webdesigns, bei dem sich eine Website flexibel an unterschiedliche Anzeigeflächen anpasst.
Wie funktionieren Media Queries?
Eine Media Query beginnt in CSS meist mit @media. Dahinter stehen ein Medientyp, ein oder mehrere Merkmale und der zugehörige CSS-Regelblock. Die Abfrage @media (min-width: 768px) greift beispielsweise, sobald der Darstellungsbereich mindestens 768 CSS-Pixel breit ist. CSS-Pixel sind dabei eine logische Maßeinheit und entsprechen nicht zwingend den physischen Bildpunkten des Geräts.
@media (min-width: 768px) { .content { display: grid; grid-template-columns: 2fr 1fr; } }. Unterhalb von 768 CSS-Pixeln bleibt das Ausgangslayout bestehen. Ab 768 CSS-Pixeln teilt der Browser den Inhaltsbereich in zwei Spalten auf. Treffen mehrere Media Queries gleichzeitig zu, entscheidet die normale CSS-Kaskade. Dabei zählen unter anderem die Spezifität eines Selektors, die Reihenfolge der Regeln und eine mögliche Vererbung. Zwei überlappende Abfragen erzeugen deshalb keinen technischen Konflikt, können aber unerwartete Darstellungen verursachen, wenn eine spätere Regel eine frühere Formatierung überschreibt.
Merkmale von Media Queries
Media Queries prüfen mehr als die Bildschirmbreite. Moderne Websites können auch auf die Ausrichtung eines Geräts, das Farbschema des Betriebssystems oder den Wunsch nach reduzierten Bewegungen reagieren. Welche Abfrage sinnvoll ist, hängt von der Darstellung und von den Anforderungen der Nutzer ab.
| Merkmal | Beispiel | Typischer Einsatz |
|---|---|---|
| Breite | min-width: 768px |
Mehrspaltiges Layout ab einer bestimmten Fläche |
| Ausrichtung | orientation: landscape |
Anpassung im Querformat |
| Farbschema | prefers-color-scheme: dark |
Dunkle Farbgestaltung nach Systemeinstellung |
| Bewegung | prefers-reduced-motion: reduce |
Reduzierte Animationen für empfindliche Nutzer |
| Ausgabemedium | print |
Druckansicht ohne Navigation oder Bedienelemente |
Die Medientypen screen und print unterscheiden Bildschirmdarstellung und Druckausgabe. Wird kein Medientyp angegeben, bezieht sich eine Abfrage grundsätzlich auf alle passenden Ausgabemedien. Viele aktuelle Stylesheets verwenden deshalb nur noch Merkmale wie width, sofern keine eigene Druckansicht erforderlich ist.
Breakpoints richtig festlegen
Breakpoints sind die Schwellenwerte, an denen sich ein Layout sichtbar verändert. Ein verbreiteter Denkfehler besteht darin, Breakpoints ausschließlich nach bekannten Smartphone- oder Tablet-Modellen festzulegen. Gerätegrößen verändern sich laufend. Stabiler sind Schwellenwerte, die dort entstehen, wo Navigation, Textspalten, Tabellen oder Produktkarten im konkreten Layout nicht mehr ausreichend Platz haben.
Ein Mobile-First-Stylesheet definiert zuerst die kompakte Grunddarstellung und erweitert das Layout anschließend mit min-width-Abfragen. Bei drei Layoutstufen könnten die Basisregeln für kleine Flächen gelten, ab 768 CSS-Pixeln zwei Spalten und ab 1.200 CSS-Pixeln eine breitere Navigation aktiv werden. Diese Werte sind Beispiele und keine universellen Standards.
Media Queries und SEO
Media Queries sind kein eigenständiger Rankingfaktor. Media Queries beeinflussen SEO indirekt, wenn sie Navigation, Lesbarkeit und Bedienbarkeit auf mobilen Geräten verbessern. Google verwendet für die Indexierung überwiegend die mobile Darstellung einer Website. Inhalt und interne Links sollten deshalb auch auf kleinen Bildschirmen vollständig erreichbar und nicht nur für Desktop-Nutzer vorgesehen sein.
Eine responsive Umsetzung verwendet idealerweise dieselbe URL und denselben HTML-Inhalt für alle Bildschirmgrößen. CSS verändert die Darstellung, während Überschriften, Texte und Links im Dokument erhalten bleiben. Diese Struktur vereinfacht Crawling und Pflege gegenüber getrennten mobilen URLs. Sie unterstützt außerdem eine konsistente Onpage-Optimierung über alle Geräteklassen hinweg.
Media Queries reduzieren die Dateigröße einer Website nicht automatisch. Ein mit display: none ausgeblendetes Bild oder Video kann je nach Einbindung trotzdem übertragen werden. Für Bilder sind zusätzlich srcset und sizes sinnvoll, damit der Browser eine zur Anzeigefläche passende Datei auswählt. Weitere Optimierungsmöglichkeiten zeigt der kostenlose Ladezeiten-Check.
Messbar ist die Qualität der Umsetzung, indem du definierte Breiten in den Browser-Entwicklungswerkzeugen testest und anschließend echte Mobilgeräte einbeziehst. Prüfe dabei horizontales Scrollen, überlagerte Inhalte, Schriftgrößen, Navigation und bedienbare Schaltflächen. Ein automatischer Test findet technische Auffälligkeiten, ersetzt aber keine manuelle Kontrolle der wichtigsten Seitentypen.
Relevanz für SEA und GEO
Bei SEA entscheidet die mobile Darstellung einer Landingpage mit darüber, ob ein Anzeigenklick zu einer Anfrage oder einem Kauf führen kann. Media Queries sollten Formulare, Produktinformationen und Handlungsflächen auf kleinen Bildschirmen klar anordnen. Eine responsive Anzeige allein genügt nicht, wenn zentrale Inhalte erst nach horizontalem Scrollen oder hinter ungeeigneten Navigationselementen erreichbar sind.
Für GEO, also Generative Engine Optimization, verändern Media Queries normalerweise nur die Präsentation und nicht die semantische Bedeutung des Inhalts. KI-Systeme profitieren von klar strukturiertem HTML mit nachvollziehbaren Überschriften, Tabellen und Absätzen. Wichtige Informationen sollten deshalb im Dokument vorhanden bleiben und nicht abhängig von einer Bildschirmbreite durch unterschiedlich erzeugte Inhalte ersetzt werden. Eine solche technische Grundlage gehört zu einer auf Google und KI-Suchen ausgerichteten SEO- und GEO-Strategie.
Media Queries und verwandte Techniken
Der Unterschied zwischen Media Queries und Container Queries liegt im Bezugspunkt. Media Queries prüfen meist den Viewport, also den sichtbaren Bereich des Browserfensters. Container Queries reagieren dagegen auf die Größe eines umgebenden Elements. Eine Produktkarte kann sich mit Container Queries unabhängig davon verändern, ob sie in einer schmalen Seitenleiste oder in einem breiten Inhaltsbereich steht.
Der Unterschied zwischen Media Queries und responsiven Bildern liegt in der geladenen Ressource. Media Queries steuern überwiegend CSS-Eigenschaften wie Abstände, Spalten oder Sichtbarkeit. Die HTML-Attribute srcset und sizes helfen dem Browser dagegen, eine geeignete Bilddatei auszuwählen. Beide Techniken ergänzen sich, erfüllen aber unterschiedliche Aufgaben.
Der Viewport-Meta-Tag ist ebenfalls keine Media Query. Die Angabe <meta name='viewport' content='width=device-width, initial-scale=1'> weist mobile Browser an, die Layoutbreite an der Gerätebreite auszurichten. Fehlt diese Angabe, können Breakpoints trotz korrektem CSS zu spät greifen, weil der Browser zunächst mit einer virtuellen Desktopbreite rechnet.
Typische Fehler bei Media Queries
Fehler entstehen häufig durch widersprüchliche Grenzwerte, zu viele gerätespezifische Breakpoints oder unvollständige Tests. Auch eine Desktop-Ansicht, die lediglich verkleinert wird, ist kein belastbares responsives Layout. Die Gestaltung muss berücksichtigen, dass sich verfügbare Fläche, Bedienung per Touch und Reihenfolge der Inhalte gemeinsam verändern.
Eine belastbare Prüfung umfasst Startseite, Kategorieseiten, Produkte oder Leistungen, Ratgeber, Formulare und Seitenelemente mit langen Wörtern oder Tabellen. Gerade Sonderfälle zeigen, ob Breakpoints am tatsächlichen Inhalt ausgerichtet sind. Eine umfassendere technische Bewertung kann Bestandteil eines SEO-Audits oder eines responsiven Webdesign-Konzepts sein.
Häufige Fragen zu Media Queries
Welche Breakpoints sollte ich verwenden?
Es gibt keine universell richtigen Breakpoints. Lege einen Schwellenwert dort fest, wo Navigation, Text, Bilder oder andere Elemente im vorhandenen Layout zu wenig Platz haben. Gerätespezifische Standardwerte können als Ausgangspunkt dienen, sollten aber immer am tatsächlichen Inhalt geprüft werden.
Was bedeutet min-width bei einer Media Query?
Die Bedingung min-width gilt ab der angegebenen Breite einschließlich des Grenzwerts. Eine Abfrage mit min-width: 768px wird bei 768 CSS-Pixeln und auf größeren Darstellungsflächen angewendet, sofern keine stärkere oder später definierte CSS-Regel die Formatierung überschreibt.
Kann man mehrere Bedingungen kombinieren?
Ja. Mehrere Bedingungen lassen sich mit and verbinden, beispielsweise Mindestbreite und Querformat. Durch ein Komma getrennte Abfragen funktionieren wie alternative Bedingungen: Der Regelblock gilt, sobald mindestens eine der Abfragen zutrifft.
Braucht jede Website Media Queries?
Eine Website benötigt Media Queries, wenn sich ihre Darstellung abhängig von Browser- oder Geräteeigenschaften verändern soll. Sehr einfache, von Anfang an flexible Layouts können mit wenigen Abfragen auskommen. Für Navigationen, Raster und komplexe Seitentypen sind meist mehrere gezielte Breakpoints erforderlich.
Funktionieren Media Queries auch für den Druck?
Ja. Mit dem Medientyp print lassen sich eigene Druckregeln definieren. Eine Druckansicht kann Navigation, Videos und Bedienelemente ausblenden, Farben anpassen und Seitenumbrüche steuern, während der eigentliche HTML-Inhalt unverändert bleibt.
Wenn du responsive Templates technisch und für Suchmaschinen prüfen lassen möchtest, kannst du einen kostenlosen und unverbindlichen Potenzialcheck anfragen.
Sie haben noch Fragen?
