Importieren von CSS Breakpoints in JavaScript

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Nehmen wir an, Sie möchten, dass Ihr JavaScript etwas tut, wenn sich ein CSS-Media-Query-Breakpoint ändert. Dafür ist matchMedia da, aber das wird nicht so gut unterstützt wie Media-Queries und erfordert, dass Sie diese Breakpoints sowohl in CSS als auch in JS pflegen.

Leute haben dafür schon seit einiger Zeit Lösungen erfunden. Selbst hier auf CSS-Tricks, wie Enquire.js, eine Technik basierend auf Animationen, die Resize-Events vermeidet, und sogar die Nutzung von Sass.

Mike Herchels Lösung besteht darin, den :before-Inhalt des Body zu ändern und diesen Wert beim Fensterresize abzurufen. Dieser Wert ändert sich, wenn die CSS-Breakpoints erreicht werden, sodass Sie in JavaScript reagieren können.

Drei Gedanken dazu: 1) Wenn Sie auf Resize binden, wahrscheinlich debounce. 2) Wenn Sie nicht debouncen können oder wollen, testen Sie zumindest, ob sich der Wert tatsächlich geändert hat, bevor Sie weitere Arbeiten durchführen. 3) Haben Sie eine gute Namensstrategie für die Breakpoints.

Direkter Link →