Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lära Bygga Flexibla Layouter för Olika Skärmstorlekar | Responsiv Webbdesign i CSS
Avancerade CSS-tekniker

bookBygga Flexibla Layouter för Olika Skärmstorlekar

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:

question mark

Välj de korrekta påståendena.

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 6. Kapitel 3

Fråga AI

expand

Fråga AI

ChatGPT

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

Awesome!

Completion rate improved to 2.04

bookBygga Flexibla Layouter för Olika Skärmstorlekar

Svep för att visa menyn

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:

question mark

Välj de korrekta påståendena.

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 6. Kapitel 3
some-alt