Bygge 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:
Takk for tilbakemeldingene dine!
Spør AI
Spør AI
Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår
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
Bygge 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:
Takk for tilbakemeldingene dine!