I moderne webutvikling finnes det to tilnærminger: adaptive og responsive oppsett.

Responsive oppsett er utformet for å ha flere visningsvarianter som kan gli sømløst over i hverandre, noe som gir fleksibel strekking og endring av størrelsen på elementene. Når visningsområdet endres, blir blokkene på siden trukket sammen eller strukket ut jevnt, og ved et bestemt bruddpunkt endrer de posisjon for å optimalisere bruken av horisontal plass.

Adaptive oppsett har flere visningsvarianter, men designendringene skjer gjennom faste hopp mellom bruddpunktene. Når et bruddpunkt er nådd, kan ikke designet endres før neste bruddpunkt er nådd.

Øvelse

La oss øve og lage 2 div-elementer. Det første elementet skal ha et adaptivt oppsett, og det andre skal ha et responsivt oppsett. Vi må også legge til ulike verdier for background-color-egenskapen ved endring av skjermstørrelse.

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

HTML ser slik ut:

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

For det adaptive oppsettet må vi også angi en spesifikk 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 slik ut:

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. Vennligst merk deg endringen i skjermbredden øverst i opptaket: