In der modernen Webentwicklung haben wir zwei Ansätze: adaptive und responsive Layouts.

Responsive Layouts sind so konzipiert, dass sie mehrere Anzeigevariationen haben, die nahtlos ineinander übergehen können, sodass Elemente flexibel gestreckt und in der Größe verändert werden können. Wenn sich die Größe des Ansichtsfensters ändert, werden die Blöcke auf der Seite sanft zusammengezogen oder gestreckt, und an einem bestimmten Breakpoint ändern sie ihre Positionierung, um die horizontale Raumnutzung zu optimieren.

Adaptive Layouts haben mehrere Anzeigevariationen, aber die Designänderungen erfolgen durch festgelegte Sprünge zwischen Breakpoints. Sobald ein Breakpoint erreicht ist, kann das Design nicht geändert werden, bis der nächste Breakpoint erreicht wird.

Übung

Lassen Sie uns üben und 2 div-Elemente erstellen. Das erste Element wird das adaptive Layout haben, und das zweite wird das responsive Layout haben. Außerdem müssen wir unterschiedliche Werte für die background-color-Eigenschaft bei Bildschirmänderung hinzufügen.

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

HTML sieht so aus:

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

Für das adaptive Layout müssen wir auch eine spezifische Breite für das div-Element angeben.

• Für die Breite von 321px bis 600px ist die Breite 300px;
• Für die Breite von 601px bis 880px ist die Breite 580px;
• Für die Breite ab 881px ist die Breite 860px.

CSS sieht so 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 Teil der Aufnahme: