In de moderne webontwikkeling zijn er twee benaderingen: adaptieve en responsieve lay-outs.

Responsieve lay-outs zijn ontworpen met meerdere weergavevariaties die soepel in elkaar overgaan, waardoor flexibele uitrekking en aanpassing van elementen mogelijk is. Wanneer de grootte van het viewport wordt aangepast, worden de blokken op de pagina vloeiend samengetrokken of uitgerekt, en bij een specifiek breakpoint verandert hun positionering om het horizontale ruimtegebruik te optimaliseren.

Adaptieve lay-outs beschikken over meerdere weergavevariaties, maar de ontwerpwijzigingen vinden plaats via vaste sprongen tussen breakpoints. Zodra een breakpoint is bereikt, kan het ontwerp niet worden aangepast tot het volgende breakpoint wordt bereikt.

Oefening

Laten we oefenen en twee div-elementen aanmaken. Het eerste element krijgt een adaptieve lay-out en het tweede een responsieve lay-out. Daarnaast moeten we verschillende waarden voor de eigenschap background-color instellen afhankelijk van de schermgrootte.

• Voor een breedte van 0 tot 320px is de kleur #7f58af;
• Voor een breedte van 321px tot 600px is de kleur #64c5eb;
• Voor een breedte van 601px tot 880px is de kleur #eb4dba;
• Voor een breedte vanaf 881px is de kleur #feb326.

HTML ziet er als volgt uit:

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

Voor de adaptieve lay-out moeten we ook een specifieke breedte voor het div-element opgeven.

• Voor een breedte van 321px tot 600px is de breedte 300px;
• Voor een breedte van 601px tot 880px is de breedte 580px;
• Voor een breedte vanaf 881px is de breedte 860px.

CSS ziet er als volgt uit:

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

Het resultaat dat we verkrijgen. Let op de wijziging van de schermbreedte in het bovenste gedeelte van de opname: