Media Queries

Was sind Media Queries?

Media Queries sind ein zentraler Bestandteil von CSS und ermöglichen es, eine Website an unterschiedliche Bildschirmgrößen, Auflösungen und Gerätetypen anzupassen. Sie bilden die technische Grundlage für responsive Webdesign – also dafür, dass sich Websites auf Smartphones, Tablets, Laptops oder großen Monitoren immer optimal darstellen.

Einfach gesagt: Mit Media Queries sagst du dem Browser, welche Styles unter welchen Bedingungen gelten sollen.

Warum sind Media Queries wichtig?

Nutzer:innen besuchen Websites heute mit unterschiedlichsten Geräten: vom kleinen Smartphone im Hochformat bis hin zum ultrabreiten 4K-Monitor. Ohne Media Queries wären alle Nutzer:innen auf dasselbe Layout festgelegt – was zu schlechter Lesbarkeit, Scroll-Chaos oder abgeschnittenen Inhalten führen kann.

Media Queries sorgen dafür, dass sich:

  • Texte lesbar anpassen
  • Bilder korrekt skalieren oder austauschen
  • Spalten sich zu Zeilen umbrechen
  • Navigationen mobilfreundlich verhalten
  • Layouts flexibel aufbrechen oder verdichten

Gerade bei WordPress-Themes, Elementor-Seiten oder Custom CSS ist der gezielte Einsatz von Media Queries entscheidend für eine gute User Experience auf allen Endgeräten.

So funktionieren Media Queries

Media Queries bestehen aus einer Bedingung und einem dazugehörigen CSS-Block. Der Browser prüft, ob die Bedingung zutrifft – und wendet dann den Style an.

Beispiel:

@media (max-width: 768px) {
  .header {
    font-size: 16px;
    padding: 10px;
  }
}

Dieser Code sagt: „Wenn der Bildschirm kleiner oder gleich 768 Pixel breit ist (typisch für Tablets oder Smartphones), dann verwende kleinere Schrift und weniger Padding im Header.“

Häufig genutzte Bedingungen:

  • max-width – gilt bis zu einer bestimmten Breite
  • min-width – gilt ab einer bestimmten Breite
  • orientation: portrait – für Hochformat
  • orientation: landscape – für Querformat
  • resolution, hover, pointer – für spezielle Geräteverhalten

Typische Breakpoints in der Praxis

In vielen Projekten – insbesondere bei WordPress und Frameworks wie Bootstrap – haben sich bestimmte Screen-Breakpoints etabliert:

GerätetypBreite (ca.)Beispiel-Breakpoint
Smartphonebis 480–576 px@media (max-width: 576px)
Tablet (hoch)bis 768 px@media (max-width: 768px)
Tablet (quer)bis 992 px@media (max-width: 992px)
Desktop kleinab 993 px@media (min-width: 993px)
Desktop großab 1200–1440 px@media (min-width: 1200px)

Diese Werte sind nicht verpflichtend – sie dienen als Orientierung und können je nach Zielgruppe, Designsystem oder Device-Statistik angepasst werden.

Media Queries in WordPress und Page Buildern

Wenn du mit WordPress arbeitest, kannst du Media Queries auf mehrere Arten einsetzen:

  • Im Customizer oder unter „Zusätzliches CSS“ manuell einfügen
  • Im Child Theme (style.css) gezielt auf eigene Klassen anwenden
  • Mit Page Buildern (z. B. Elementor, Bricks, Divi) über visuelle Breakpoint-Einstellungen
  • In CSS-Plugins wie Simple Custom CSS oder über Theme-spezifische Einstellungen

Viele Page Builder bieten sogenannte Responsive Controls, bei denen du direkt für Desktop, Tablet und Mobile unterschiedliche Werte setzen kannst – intern werden dann Media Queries automatisch geschrieben.

Best Practices

  • Mobile First: Beginne mit der Gestaltung für kleine Bildschirme und erweitere dann – mit min-width statt max-width.
  • Vermeide zu viele Breakpoints: Setze sie nur dort, wo das Design es wirklich braucht.
  • Nutze relative Einheiten (%, em, rem) statt fester Pixelgrößen für bessere Skalierung.
  • Teste regelmäßig auf echten Geräten – nicht nur im Chrome-Responsive-View.
  • Dokumentiere deine Breakpoints, wenn du mit mehreren Personen arbeitest.

Fazit

Media Queries sind das Rückgrat eines guten Responsive Designs. Sie sorgen dafür, dass Websites auf allen Geräten funktionieren – optisch wie funktional. Gerade in WordPress-Projekten ermöglichen sie dir die gezielte Feinarbeit am Layout, um Nutzer:innen überall ein konsistentes Erlebnis zu bieten.

Wer Media Queries klug einsetzt, verbessert nicht nur die Usability, sondern auch SEO, Ladegeschwindigkeit und Conversion-Chancen – besonders auf mobilen Geräten.

Inhaltsverzeichnis