Was ist eine Media Query?
Eine Media Query ist eine Bedingung, die du in CSS einbaust, um Stilregeln nur dann anzuwenden, wenn das Endgerät bestimmte Eigenschaften hat. Die häufigste Eigenschaft ist die Bildschirmbreite — du sagst dem Browser zum Beispiel: "Wenn der Viewport schmaler als 768 Pixel ist, zeig die Navigation als Burger-Menü." Es gibt aber auch Media Queries für die Höhe, die Ausrichtung (Hoch- oder Querformat), den Farbmodus (hell oder dunkel) und sogar dafür, ob der Nutzer Animationen reduziert haben will.
Media Queries sind der Mechanismus, der eine einzige Codebasis dazu bringt, sich auf jedem Gerät unterschiedlich zu verhalten. Ohne sie wäre Responsive Design unmöglich — du müsstest für jeden Bildschirm eine eigene Website bauen.
Vergleich aus dem Alltag: Eine Media Query ist wie eine Bedingung im Mietvertrag. "Wenn du unter 30 bist, bekommst du einen Studentenrabatt." Wenn die Bedingung nicht zutrifft, gilt die normale Regel. Wenn sie zutrifft, gilt die spezielle Regel zusätzlich.
CSS-Syntax — wie eine Media Query aussieht
Die Grundsyntax ist überraschend einfach:
@media (max-width: 768px) {
/* Diese Regeln greifen nur unter 768 Pixel Bildschirmbreite */
.navigation {
display: none;
}
.burger-menu {
display: block;
}
}@media leitet die Bedingung ein, in den Klammern steht das Kriterium, und in den geschweiften Klammern stehen die CSS-Regeln, die nur greifen, wenn die Bedingung erfüllt ist. Du kannst Bedingungen auch kombinieren:
/* Nur zwischen 600 und 1024 Pixel — also Tablet-Bereich */
@media (min-width: 600px) and (max-width: 1024px) {
.container {
padding: 32px;
}
}
/* Nur im Querformat */
@media (orientation: landscape) {
.hero {
height: 80vh;
}
}
/* Nur wenn der Nutzer Dark Mode aktiviert hat */
@media (prefers-color-scheme: dark) {
body {
background: #1a1a1a;
color: #f0f0f0;
}
}Mit and, or, not lassen sich beliebig komplexe Bedingungen bauen. In der Praxis bleibt es meistens bei einfachen Breiten-Queries — die reichen für 95 Prozent aller Anwendungsfälle.
Moderne Media Queries — Accessibility und Print
Neben der Breite gibt es zwei Queries, die heute zum Pflichtrepertoire gehören.
prefers-reduced-motion fragt ab, ob der Nutzer in seinen Systemeinstellungen "Animationen reduzieren" aktiviert hat — eine Funktion für Menschen mit vestibulären Störungen, denen große Bewegungen schlecht werden. Wer das respektiert, schaltet aufwändige Animationen automatisch ab:
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}Das ist Barrierefreiheit mit drei Zeilen Code — und mittlerweile Teil jeder sauberen Website.
@media print ist der Media-Type für den Druck. Wenn jemand deine Seite auf Papier bringt, kannst du hier gezielt Navigation, Werbung und Footer ausblenden und nur den Hauptinhalt mit gutem Zeilenabstand darstellen. Für Rechnungen, Anleitungen oder Rezept-Seiten ein kleiner, aber spürbarer Qualitätsunterschied.
Wichtig: Container Queries (@container) sehen syntaktisch ähnlich aus, sind aber keine Media Queries. Media Queries reagieren auf den gesamten Viewport, Container Queries auf einen einzelnen Eltern-Container. Mehr dazu im Eintrag Responsive Design.
Beispiele für Breakpoints — Mobile vs. Desktop
Ein typisches Beispiel aus einer echten Website: Die Hero-Section einer Tischlerei. Am Desktop steht das Bild rechts, der Text links — zweispaltig. Am Handy soll alles untereinander stehen, Bild oben, Text unten.
.hero {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
padding: 80px 64px;
}
.hero h1 {
font-size: 56px;
line-height: 1.1;
}
@media (max-width: 768px) {
.hero {
grid-template-columns: 1fr;
gap: 32px;
padding: 48px 24px;
}
.hero h1 {
font-size: 36px;
}
}Was hier passiert: Über 768 Pixel ist die Hero zweispaltig, mit 80 Pixeln Innenabstand und einer Riesen-Überschrift. Unter 768 Pixel — also auf Handy und kleinem Tablet — wird sie einspaltig, der Innenabstand schrumpft auf 24 Pixel an den Seiten und die Überschrift auf 36 Pixel. Eine einzige Regel, die das ganze Layout auf Mobile umsetzt.
Mobile-First vs. Desktop-First in Media Queries
Du kannst Media Queries auf zwei Arten denken: vom Großen zum Kleinen oder umgekehrt.
Desktop-First (mit max-width): Du schreibst zuerst die Desktop-Regeln, dann überschreibst du sie für kleinere Bildschirme.
.button { padding: 24px 48px; }
@media (max-width: 768px) {
.button { padding: 16px 32px; }
}Mobile-First (mit min-width): Du schreibst zuerst die Mobile-Regeln, dann ergänzt du für größere Bildschirme.
.button { padding: 16px 32px; }
@media (min-width: 768px) {
.button { padding: 24px 48px; }
}Beide Ansätze führen zum gleichen Ergebnis. Mobile-First ist heute Standard, weil es zur Mobile-First-Philosophie passt: Du baust das Wesentliche zuerst und ergänzt erst danach für größere Screens.
Warum sind Media Queries für deine Website wichtig?
Ohne Media Queries gibt es keine Anpassung an Bildschirmgrößen, keine Mobile-Versionen, kein Responsive Design. Eine Website, die kein Media Query enthält, sieht auf jedem Gerät gleich aus — was am Handy meistens unbedienbar bedeutet und bei Google direkt auf die Core Web Vitals schlägt.
Beispiel aus dem Alltag: Eine Heilpraktikerin hat ihre alte Website ohne Media Queries gebaut. Am Desktop sieht sie ordentlich aus. Am Handy: drei Spalten gequetscht auf 375 Pixel, Text in 8-Punkt-Schrift, Buttons übereinander. Ein Drittel der Besucher (alle, die mobil kommen) springt sofort ab. Drei Media Queries hätten gereicht, um die Spalten untereinander zu legen, die Schrift zu vergrößern und die Buttons in Daumen-Reichweite zu bringen.
Worauf du beim Einsatz von Media Queries achten solltest
Breakpoints am Inhalt orientieren, nicht an Geräten. Es ergibt keinen Sinn, einen Breakpoint genau auf "iPhone 12" zu setzen. Setze ihn dort, wo dein Layout bricht — egal welches Gerät das gerade ist.
Nicht zu viele Breakpoints. Drei bis fünf reichen für 95 Prozent aller Projekte. Wer 12 Breakpoints einbaut, schafft sich ein Wartungsmonster.
Test auf echten Geräten. Der Browser-Simulator lügt manchmal. Echte Smartphones haben unterschiedliche Pixeldichten, andere Touch-Größen und teils eigene Quirks.
Vergiss den Viewport-Meta-Tag nicht. Ohne ihn ignoriert der Mobile-Browser deine Media Queries komplett — er rendert die Desktop-Version und zoomt sie nur kleiner.