Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Erstellung Flexibler Layouts Für Verschiedene Bildschirmgrößen | Responsives Webdesign in CSS
Fortgeschrittene CSS-Techniken

bookErstellung Flexibler Layouts Für Verschiedene Bildschirmgrößen

In der modernen Webentwicklung gibt es zwei Ansätze: adaptive und responsive Layouts.

Responsive Layouts sind so konzipiert, dass sie mehrere Anzeigevarianten bieten, die nahtlos ineinander übergehen können. Dadurch wird ein flexibles Strecken und Verkleinern von Elementen ermöglicht. Wenn sich die Größe des Viewports ändert, werden die Blöcke auf der Seite sanft zusammengezogen oder gestreckt. An einem bestimmten Breakpoint ändert sich die Positionierung, um die horizontale Raumausnutzung zu optimieren.

Adaptive Layouts verfügen ebenfalls über mehrere Anzeigevarianten, jedoch erfolgen die Designänderungen durch fest definierte Sprünge zwischen den Breakpoints. Sobald ein Breakpoint erreicht ist, bleibt das Design unverändert, bis der nächste Breakpoint erreicht wird.

Übung

Erstellen Sie zwei div-Elemente. Das erste Element erhält ein adaptives Layout, das zweite ein responsives Layout. Zusätzlich sollen sich die Werte der Eigenschaft background-color mit der Bildschirmgröße ändern.

  • Für eine Breite von 0 bis 320px ist die Farbe #7f58af;
  • Für eine Breite von 321px bis 600px ist die Farbe #64c5eb;
  • Für eine Breite von 601px bis 880px ist die Farbe #eb4dba;
  • Ab einer Breite von 881px ist die Farbe #feb326.

Das HTML sieht wie folgt aus:

<div class="adaptive"></div>
<div class="responsive"></div>

Für das adaptive Layout muss außerdem eine spezifische Breite für das div-Element festgelegt werden.

  • Für eine Breite von 321px bis 600px beträgt die Breite 300px;
  • Für eine Breite von 601px bis 880px beträgt die Breite 580px;
  • Ab einer Breite von 881px beträgt die Breite 860px.

Das CSS sieht wie folgt aus:

div {
  height: 200px;
  margin: 10px auto;
  background-color: #7f58af;
}

/* ===> Adaptive <=== */

@media screen and (min-width: 321px) {
  .adaptive {
    background-color: #64c5eb;
    width: 300px;
  }
}
@media screen and (min-width: 601px) {
  .adaptive {
    background-color: #eb4dba;
    width: 580px;
  }
}
@media screen and (min-width: 881px) {
  .adaptive {
    background-color: #feb326;
    width: 860px;
  }
}

/* ===> Responsive <=== */

.responsive {
  width: 100%;
}

@media screen and (min-width: 321px) {
  .responsive {
    background-color: #64c5eb;
  }
}
@media screen and (min-width: 601px) {
  .responsive {
    background-color: #eb4dba;
  }
}
@media screen and (min-width: 881px) {
  .responsive {
    background-color: #feb326;
  }
}

Das Ergebnis, das wir erhalten. Bitte achten Sie auf die Änderung der Bildschirmbreite im oberen Bereich der Aufnahme:

question mark

Wählen Sie die korrekten Aussagen aus.

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 6. Kapitel 3

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

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

Suggested prompts:

Can you explain the main differences between adaptive and responsive layouts in simpler terms?

How do the color and width changes work in the provided CSS for each layout?

Can you give more examples of when to use adaptive vs responsive layouts in real projects?

Awesome!

Completion rate improved to 2.04

bookErstellung Flexibler Layouts Für Verschiedene Bildschirmgrößen

Swipe um das Menü anzuzeigen

In der modernen Webentwicklung gibt es zwei Ansätze: adaptive und responsive Layouts.

Responsive Layouts sind so konzipiert, dass sie mehrere Anzeigevarianten bieten, die nahtlos ineinander übergehen können. Dadurch wird ein flexibles Strecken und Verkleinern von Elementen ermöglicht. Wenn sich die Größe des Viewports ändert, werden die Blöcke auf der Seite sanft zusammengezogen oder gestreckt. An einem bestimmten Breakpoint ändert sich die Positionierung, um die horizontale Raumausnutzung zu optimieren.

Adaptive Layouts verfügen ebenfalls über mehrere Anzeigevarianten, jedoch erfolgen die Designänderungen durch fest definierte Sprünge zwischen den Breakpoints. Sobald ein Breakpoint erreicht ist, bleibt das Design unverändert, bis der nächste Breakpoint erreicht wird.

Übung

Erstellen Sie zwei div-Elemente. Das erste Element erhält ein adaptives Layout, das zweite ein responsives Layout. Zusätzlich sollen sich die Werte der Eigenschaft background-color mit der Bildschirmgröße ändern.

  • Für eine Breite von 0 bis 320px ist die Farbe #7f58af;
  • Für eine Breite von 321px bis 600px ist die Farbe #64c5eb;
  • Für eine Breite von 601px bis 880px ist die Farbe #eb4dba;
  • Ab einer Breite von 881px ist die Farbe #feb326.

Das HTML sieht wie folgt aus:

<div class="adaptive"></div>
<div class="responsive"></div>

Für das adaptive Layout muss außerdem eine spezifische Breite für das div-Element festgelegt werden.

  • Für eine Breite von 321px bis 600px beträgt die Breite 300px;
  • Für eine Breite von 601px bis 880px beträgt die Breite 580px;
  • Ab einer Breite von 881px beträgt die Breite 860px.

Das CSS sieht wie folgt aus:

div {
  height: 200px;
  margin: 10px auto;
  background-color: #7f58af;
}

/* ===> Adaptive <=== */

@media screen and (min-width: 321px) {
  .adaptive {
    background-color: #64c5eb;
    width: 300px;
  }
}
@media screen and (min-width: 601px) {
  .adaptive {
    background-color: #eb4dba;
    width: 580px;
  }
}
@media screen and (min-width: 881px) {
  .adaptive {
    background-color: #feb326;
    width: 860px;
  }
}

/* ===> Responsive <=== */

.responsive {
  width: 100%;
}

@media screen and (min-width: 321px) {
  .responsive {
    background-color: #64c5eb;
  }
}
@media screen and (min-width: 601px) {
  .responsive {
    background-color: #eb4dba;
  }
}
@media screen and (min-width: 881px) {
  .responsive {
    background-color: #feb326;
  }
}

Das Ergebnis, das wir erhalten. Bitte achten Sie auf die Änderung der Bildschirmbreite im oberen Bereich der Aufnahme:

question mark

Wählen Sie die korrekten Aussagen aus.

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 6. Kapitel 3
some-alt