Die Erstellung von responsiven und adaptiven Layouts ist ein entscheidender Aspekt der modernen Webentwicklung. Ziel ist stets eine Webseite, die auf allen Geräten zugänglich ist. Glücklicherweise steht Webentwicklern eine umfangreiche Auswahl an Werkzeugen zur Verfügung, die direkt in Webbrowser integriert sind.

Betrachtung der Chrome-Webtools:

Werkzeuge

Um Zugriff auf die responsiven Werkzeuge zu erhalten und diese zu verwenden, benötigen wir Folgendes:

1. Öffnen der Entwicklertools wie zuvor beschrieben. Mögliche Wege sind: Mit der Maus die rechte Maustaste klicken und das Feld "Untersuchen" auswählen oder die Tastenkombination "Ctrl+Shift+I" (Windows, Linux) bzw. "Command+Option+I" (Mac) verwenden;
2. Klicken auf das 5-Symbol. Damit gelangen wir in den responsiven Modus. Um den responsiven Modus zu schließen, erneut auf das 5-Symbol klicken.

Zusätzliche Funktionen:

1. Die Breite des Geräts kann durch Ziehen des Elements 6 verändert (simuliert) werden;
2. Ein bestimmtes Gerät kann über das Feld 1 ausgewählt werden. Es stehen einige weit verbreitete Geräte zur Auswahl, die von Nutzern am häufigsten verwendet werden;
3. Die Breite (Feld 2) und Höhe (Feld 3) der Gerätegröße können eingestellt werden;
4. Der Maßstab kann über das Feld 4 angepasst werden. Dies wird in der Regel verwendet, wenn mit großen Werten gearbeitet wird und das gesamte Layout sichtbar sein soll;
5. 7 ist der Viewport. Hier wird die Webseitenansicht für die gewählte Bildschirmgröße angezeigt.

Hinweis

Alle modernen Browser (z. B. Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge usw.) verfügen über denselben Satz an Werkzeugen. Es spielt keine Rolle, welcher Browser ausgewählt wird.