Lære Opbygning af Fleksible Layouts til Forskellige Skærmstørrelser

I moderne webudvikling findes der to tilgange: adaptive og responsive layouts.

Responsive layouts er designet til at have flere visningsvariationer, der kan skifte glidende mellem hinanden, hvilket muliggør fleksibel udstrækning og tilpasning af elementer. Når viewport-størrelsen ændres, bliver blokkene på siden trukket sammen eller udvidet jævnt, og ved et bestemt breakpoint ændrer de deres placering for at optimere brugen af den horisontale plads.

Adaptive layouts har flere visningsvariationer, men designændringerne sker gennem faste spring mellem breakpoints. Når et breakpoint nås, kan designet ikke ændres før næste breakpoint opnås.

Øvelse

Lad os øve os og oprette 2 div-elementer. Det første element får et adaptivt layout, og det andet får et responsivt layout. Vi skal også tilføje forskellige værdier for background-color-egenskaben ved ændring af skærmstørrelse.

For bredde fra 0 til 320px er farven #7f58af;
For bredde fra 321px til 600px er farven #64c5eb;
For bredde fra 601px til 880px er farven #eb4dba;
For bredde fra 881px er farven #feb326.

HTML ser således ud:

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

For det adaptive layout skal vi også angive en specifik bredde for div-elementet.

For bredde fra 321px til 600px er bredden 300px;
For bredde fra 601px til 880px er bredden 580px;
For bredde fra 881px er bredden 860px.

CSS ser således ud:

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;
  }
}

Resultatet vi opnår. Bemærk venligst ændringen i skærmbredden i den øverste del af optagelsen:

Var alt klart?

Tak for dine kommentarer!

Sektion 6. Kapitel 3

Spørg AI

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

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

Stryg for at vise menuen