Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Bygge Fleksible Oppsett for Ulike Skjermstørrelser | Responsivt Webdesign i CSS
Avanserte CSS-teknikker

bookBygge Fleksible Oppsett for Ulike Skjermstørrelser

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:

question mark

Velg de riktige påstandene.

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 6. Kapittel 3

Spør AI

expand

Spør AI

ChatGPT

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

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

bookBygge Fleksible Oppsett for Ulike Skjermstørrelser

Sveip for å vise menyen

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:

question mark

Velg de riktige påstandene.

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 6. Kapittel 3
some-alt