Responsive Breakpoints mittels jQuery erstellen

Wer heutzutage Webdesigns entwickeln möchte, sollte nach Möglichkeit gleich den Ansatz "Mobile first" benutzen. Also beginnend bei der Auflösung von Smartphones, über Phablets und Tablets, bis hin zu großen TFT-Bildschirmen, sowie Kinoleinwänden. CSS bietet die Option mit Media Queries die Formatierung des Designs bei jeder erdenklichen Auflösung zu verändern und den eigenen Wünschen anzupassen. Doch manchmal genügt das nicht. Was ist, wenn bei einer bestimmten Displaygröße Aktionen starten sollen, beispielsweise das Löschen einer CSS-Klasse. Wie löst man dieses Problem? Die Antwort: jQuery und ein kleiner Inselzauber. Zwar existieren zahlreiche Erweiterungen, wie Breakpoint.js oder andere Plugins, aber in meinen Augen geht’s auch deutlich einfacher.

So setzt du in jQuery ganz easy deine Breakpoints

Eigene Umbruchpunkte können mit jQuery relativ einfach erstellt werden. Bei der Festlegung der Breakpoints orientiert man sich an den Maßen des Anzeigebereiches oder Gerätes. Ryan Van Etten gibt auf seiner Webseite eine sehr schöne Übersicht verschiedenster Ermittlungsmethoden. Das Tolle daran, diese Auflistung ist live. Dabei sieht man wunderbar, wie die einzelnen Methoden wirken. Meist ist die Breite des Viewports relevanter. Daher ist meine erstes Beispiel genau darauf ausgelegt. Durch einige Testläufe fiel mir auf, dass die Angabe window.innerWidth zuverlässige Werte liefert. Bei window.Width beobachtete ich meist Ungenauigkeiten bei der Ermittlung der aktuellen Fensterbreite.

if ($(window).innerWidth() <= 568) {
$('h1').addClass('blue')
}
else {
$('h1').removeClass('blue')
};

Live-Demo auf jsFiddle

Damit funktioniert dieses Konstrukt eigentlich schon. Jedoch sollte beim Vergrößern oder Verkleinern des Browserfensters auffallen, dass dabei keine Änderungen erfolgen. Der Grund dafür ist offensichtlich. Der Umbruch ist noch statisch. Nur nach Größenänderung und anschließendem neu laden der Seite funktionierts. Mag gehen, ist aber nicht besonders Responsive. Um dieses Problem zu beheben, stellt jQuery die Funktion resize() bereit, welche wir an diesen ganzen Aufruf ketten. Dann klappen auch dynamische Änderungen bei Größenänderungen.

$(window).bind('resize', function () {
	if ($(window).innerWidth() <= 568) {
$('h1').addClass('blue')
}
else {
$('h1').removeClass('blue')
};
});

Live-Demo auf jsFiddle

Zwei Snippets zu eurer freien Verfügung

Nachfolgend stehen nun zwei Snippets. Das erste besteht aus einer einfachen If-Else-Anweisung, und eignet sich eher für zwei Auflösungen. Im zweiten Beispiel wird Switch-Case verwendet. Damit können beliebig viele Größenangaben zum Einsatz kommen. Alternativ funktioniert gleichermaßen die Anweisung If-Else (Live-Demo auf jsFiddle), ist allerdings etwas unübersichtlicher.

Breakpoint mit If-Else-Anweisung

$(window).bind("resize",function(){
	if($(window).innerWidth() < xxx){
		//your changes here
	}
	else {
		//your changes here
	}
});

Breakpoint mit Switch-Case-Anweisung

$(window).bind("resize",function(){
	var width = $(window).innerWidth();
	switch(true) {
		case(width < xxx):
		//your changes here
		break;
		case(width > xxx):
		//your changes here
		break;
		default:
		//your changes here
		}
});

Aus diesen beiden Konstrukten könnt ihr euch eure eigenen Breakpoints entwickeln und alle Anpassungen in den Baustein einpflegen. Wer mag, kann ansonsten immer noch zu einem Plugin greifen, aber aus meiner Sicht finde ich diese Methode hier wesentlich simpler. Zudem verwendet fast jede zweite Webseite jQuery. Also ist es quasi ein Feature out of the box. Erweiterungen sind oftmals nur für einen Komfortzuwachs von Bedeutung. Dieser ist hier allerdings nur bei größeren Projekten von Interesse, wenn überhaupt. Funktional sollten daraus keine Nachteile entstehen.

Setzt ihr in euren Webprojekten auch Breakpoints ein und womit setzt ihr diese um? Ist die von mir vorgestellte Variante für euch interessant?


Avatar von reraiseace
Autor: Markus Werner (reraiseace) Twitterreraiseace, Google+reraiseace, Twittercb_werner
Ich bin Redaktionsvolontär bei der COMPUTER BILD in Hamburg, Fernstudent am Deutschen Journalistenkolleg und schreibe auf re{raise}ace privat über Webdesign und Programmierung. Seit 2015 schrieb ich auch regelmäßig für andere Medien.

0 Kommentare

Du kannst diesen Artikel nicht mehr kommentieren.