Inom modern webbutveckling finns det två tillvägagångssätt: adaptiva och responsiva layouter.

Responsiva layouter är utformade för att ha flera visningsvarianter som smidigt kan övergå mellan varandra, vilket möjliggör flexibel utsträckning och storleksändring av element. När vyfönstrets storlek ändras, dras eller sträcks blocken på sidan ut smidigt, och vid en specifik brytpunkt ändrar de sin positionering för att optimera användningen av horisontellt utrymme.

Adaptiva layouter har flera visningsvarianter, men designändringarna sker genom fasta hopp mellan brytpunkter. När en brytpunkt nås kan designen inte ändras förrän nästa brytpunkt uppnås.

Övning

Låt oss öva och skapa 2 div-element. Det första elementet kommer att ha en adaptiv layout och det andra en responsiv layout. Vi behöver även lägga till olika värden för egenskapen background-color vid skärmstorleksändring.

• För bredd från 0 till 320px är färgen #7f58af;
• För bredd från 321px till 600px är färgen #64c5eb;
• För bredd från 601px till 880px är färgen #eb4dba;
• För bredd från 881px är färgen #feb326.

HTML ser ut så här:

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

För den adaptiva layouten behöver vi även ange en specifik bredd för div-elementet.

• För bredd från 321px till 600px är bredden 300px;
• För bredd från 601px till 880px är bredden 580px;
• För bredd från 881px är bredden 860px.

CSS ser ut så här:

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 får. Observera förändringen av skärmbredden i den övre delen av inspelningen: