Bygga 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:
Tack för dina kommentarer!
Fråga AI
Fråga AI
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
Bygga 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:
Tack för dina kommentarer!