suit: Derzeitigen Breakpoint mit CSS und JavaScript ermitteln

Beitrag lesen

Man könnte auch einfach darauf verzichten, ein Eierkopf zu sein der hier auf der Benutzung eines CSS-Pesudoelementes besteht – und stattdessen einfach per JavaScript (was man ja sowieso für das ganze nutzen will) ein Element ans Ende von Body einfügen, und dann dessen Maße auslesen (wozu vermutlich in allen Browsern offsetWidth reichen dürfte).

Aber hey – warum einfach, wenn … :-)

Mir ging es prinzipiell darum, nicht eine Breite auslesen zu müssen, sondern einen definieren Wert in Form eines Texts - wenn man die Breite ausliest (dafür braucht man eigentlich gar kein Element) habe ich keine direkte Assoziation zum entsprechenden Abschnitt im CSS und muss erst wieder abgleichen, welcher nun der war, der 780 Pixel breit ist.

Das lässt sich umgehen, indem man die Breite dieses Elements dann mit CSS setzt (in eben diesen Breakpoints), aber das führt dazu dass man dann trotzdem eine Zuordnung braucht.

Wenn der Code wiederverwendbar ist und die Abmessungen der Breakpoints nicht immer dieselben sind, wird das lästig und unnötig viel Code.

Wenn man z.B. Bootstrap verwendet, kann man hier einfach ein xs, md, lg oder wie auch immer setzen und weiß im JavaScript sofort, welches dieser Layouts grade aktiv ist - ohne erst herumrechnen zu müssen und eine Tabelle zu führen, welche Abmessungen jetzt wofür gut sind.