Erstellung 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:
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
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
Erstellung 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:
Danke für Ihr Feedback!