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: