Das Erstellen von responsiven und adaptiven Layouts ist ein entscheidender Aspekt der modernen Webentwicklung. Wir möchten immer eine Webseite, die auf allen Geräten zugänglich ist. Glücklicherweise haben Webentwickler Zugriff auf eine robuste Reihe von Tools, die in die Webbrowser integriert sind.

Betrachten wir die Chrome-Webtools:

Werkzeuge

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

1. Öffnen Sie die Entwicklertools, wie wir es zuvor getan haben. Mögliche Wege sind: mit der Maus, indem Sie die rechte Maustaste klicken und das Feld "Untersuchen" auswählen, oder mit der Tastenkombination "Strg+Umschalt+I" (Windows, Linux) oder "Befehl+Wahl+I" (Mac);
2. Klicken Sie auf das 5-Symbol. Wir gelangen in den responsiven Modus. Um den responsiven Modus zu schließen, müssen wir erneut auf das 5-Symbol klicken.

Zusätzliche Funktionen:

1. Wir können die Breite des Geräts (imitieren) ändern, indem wir das 6-Element ziehen;
2. Wir können das bestimmte Gerät mit Hilfe des Feldes 1 auswählen. Es gibt einige weit verbreitete Geräte, die Benutzer am häufigsten verwenden;
3. Wir können die Breite (Feld 2) und Höhe (Feld 3) der Gerätegröße einstellen;
4. Wir können den Maßstab (Feld 4) ändern. Im Allgemeinen wird er verwendet, wenn wir es mit großen Werten zu tun haben und das gesamte Layout sehen müssen;
5. 7 ist der Viewport. Wir sehen die Website-Ansicht für eine solche Breite und Höhe der Bildschirmgröße.

Hinweis

Alle modernen Browser (z. B. Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge, etc.) haben denselben Satz von Werkzeugen. Es gibt keinen Unterschied, welchen Browser wir auswählen.