Media Queries bauen

Vorher überlegen

Braucht es den Haltepunkt überhaupt?

Die meisten Media Queries im Netz gibt es nur, weil vorher jemand eine feste Pixelzahl gesetzt hat. Eine Überschrift mit font-size: 48px sprengt auf dem Handy die Zeile, also baut man eine Abfrage darum und setzt sie dort auf 28px. Dann noch eine für Tablets. Und wenn ein Gerät dazwischen liegt, springt die Schrift.

Mit clamp() entfällt das: Sie geben einen kleinsten Wert, einen Wunschwert, der mit der Fensterbreite wächst, und einen größten Wert an. Dazwischen skaliert die Schrift stufenlos – kein Sprung, keine Abfrage, und vor allem kein Umbruch mitten im Wort, weil die Schrift einfach kleiner wird, bis das längste Wort hineinpasst.

/* statt drei Media Queries */
font-size: clamp(1.45rem, 0.8rem + 3.4vw, 4.5rem);

Media Queries bleiben trotzdem richtig – aber für Struktur, nicht für Größen: wenn aus einer Spalte zwei werden, wenn ein Inhaltsverzeichnis von der Klappliste zur festen Seitenspalte wird, wenn eine Navigation vom Menüknopf zur Leiste wechselt. Genau dafür ist dieser Generator gedacht.

Welche Haltepunkte braucht man wirklich?

Die üblichen Verdächtigen – 768, 1024, 1280 – stammen aus einer Zeit, in der man Geräte aufzählen konnte. Heute gibt es Handys mit 1080 Pixeln Breite, Tablets im Querformat mit 1366 und geteilte Fenster in jeder denkbaren Größe. Ein Haltepunkt, der nach einem Gerät benannt ist, trifft schon lange kein Gerät mehr.

Der bessere Weg: Ziehen Sie das Fenster langsam breiter und setzen Sie den Haltepunkt dorthin, wo das Layout anfängt, schlecht auszusehen. Bei einer dreispaltigen Kachel ist das der Punkt, an dem die Überschriften zu brechen beginnen – nicht 768. So entstehen meist zwei bis drei Haltepunkte für die ganze Website, und jeder hat einen Grund, den man benennen kann.

Container Queries statt Fensterbreite

Eine Kachel weiß nicht, ob sie in der Hauptspalte oder in der schmalen Seitenspalte steht – die Fensterbreite ist in beiden Fällen dieselbe. Genau dafür gibt es Container Queries: Der Baustein fragt nicht das Fenster, sondern den Platz, den er selbst bekommen hat.

.karten { container-type: inline-size; }

@container (min-width: 30rem) {
  .karte { display: grid; grid-template-columns: auto 1fr; }
}

Alle aktuellen Browser können das. Für das Seitengerüst bleiben Media Queries richtig, für einzelne Bausteine sind Container Queries fast immer die bessere Wahl – der Baustein funktioniert dann überall, wo Sie ihn hinsetzen.

Zwei Stolpersteine

Die Lücke zwischen min und max

Wer max-width: 768px und min-width: 768px nebeneinander benutzt, hat bei genau 768 Pixeln beide Regeln aktiv. Deshalb setzt dieses Werkzeug bei Bereichen und Obergrenzen 0.02px ab – der Wert ist klein genug, um keine reale Breite auszulassen, und groß genug, dass Browser ihn nicht wegrunden.

Von klein nach groß

Schreiben Sie die Grundfassung für schmale Schirme und erweitern Sie mit min-width nach oben. Andersherum tragen Handys die volle Last aller Regeln, die sie danach wieder zurücknehmen müssen – und genau dort zählt jedes Kilobyte.

Alle Tools ansehen