Media Queries

Media Queries: auf das Ausgabegerät reagieren

Mit @media könnt ihr CSS-Regeln nur unter bestimmten Bedingungen gelten lassen. Am häufigsten: ab einer bestimmten Fensterbreite.

.sidebar {
  display: none; /* auf kleinen Bildschirmen erstmal ausblenden */
}

@media (min-width: 768px) {
  .sidebar {
    display: block; /* ab 768px wieder einblenden */
  }
}

• min-width - Regel gilt ab dieser Breite
• max-width - Regel gilt bis zu dieser Breite
• Typische Breakpoints: 480px (Handy), 768px (Tablet), 1024px+ (Desktop) - aber richtet euch nach eurem Inhalt, nicht nach starren Geräte-Größen!

Mobile First: erst schmal, dann breiter

2009 schlug Luke Wroblewski unter dem Slogan “Mobile First” vor, zuerst die schmale, mobile Version einer Seite zu gestalten - und davon dann die breiteren Versionen abzuleiten, nicht umgekehrt:

/* 1. Basis-Styles gelten für ALLE Bildschirmgrößen - "mobil" gedacht */
.sidebar {
  display: none;
}

/* 2. Ab einer bestimmten Breite: Ergänzungen für mehr Platz */
@media (min-width: 768px) {
  .sidebar {
    display: block;
  }
}

Warum Mobile First?

Mit min-width schreibt ihr die Basis-Styles für den einfachsten Fall (schmaler Bildschirm, wenig Platz) und ergänzt für mehr Platz. Der umgekehrte Weg (max-width, vom breiten Desktop-Layout “runterbrechen”) führt schnell zu widersprüchlichen Überschreibungen, weil ihr ständig Dinge wieder zurücknehmen müsst, die für den Desktop-Fall gedacht waren.

Responsive Design ist keine neue Idee

Die Verwendung von Media Queries für ganze Layout-Wechsel wurde 2010 in einem Artikel von Ethan Marcotte unter dem Begriff “Responsive Web Design” bekannt gemacht. Inhalt und HTML bleiben dabei gleich - nur das CSS-Layout wechselt:

Das Prinzip ist bis heute dasselbe geblieben - nur mit mehr Zwischenstufen, höheren Auflösungen und mehr Werkzeugen (Container Queries, clamp(), …):