Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Untersuchen von Webseiten | Responsives Webdesign in CSS
Fortgeschrittene CSS-Techniken

bookUntersuchen von Webseiten

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.

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 6. Kapitel 4

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Awesome!

Completion rate improved to 2.04

bookUntersuchen von Webseiten

Swipe um das Menü anzuzeigen

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.

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 6. Kapitel 4
some-alt