Joustavien Asettelujen Rakentaminen Eri Näyttökokoja Varten
Nykyaikaisessa web-kehityksessä on kaksi lähestymistapaa: adaptiiviset ja responsiiviset layoutit.
Responsiiviset layoutit on suunniteltu sisältämään useita näyttövariaatioita, jotka voivat joustavasti siirtyä toisiinsa mahdollistaen elementtien venymisen ja kutistumisen. Kun selainikkunan kokoa muutetaan, sivun lohkot supistuvat tai venyvät sulavasti, ja tietyssä katkaisupisteessä niiden asettelu muuttuu vaakasuoran tilan optimoimiseksi.
Adaptiiviset layoutit sisältävät useita näyttövariaatioita, mutta muotoilun muutokset tapahtuvat kiinteiden hyppyjen kautta katkaisupisteiden välillä. Kun katkaisupiste saavutetaan, muotoilua ei voi muuttaa ennen seuraavaa katkaisupistettä.
Harjoitus
Harjoitellaan luomalla 2 div
-elementtiä. Ensimmäinen elementti käyttää adaptiivista asettelua ja toinen responsiivista asettelua. Lisäksi määritellään eri arvot background-color
-ominaisuudelle näytön koon muuttuessa.
- Leveyksille 0–320px väri on
#7f58af
; - Leveyksille 321–600px väri on
#64c5eb
; - Leveyksille 601–880px väri on
#eb4dba
; - Leveyksille 881px ja yli väri on
#feb326
.
HTML näyttää tältä:
<div class="adaptive"></div>
<div class="responsive"></div>
Adaptiivisessa asettelussa tulee lisäksi määrittää tietty leveys div
-elementille.
- Leveyksille 321–600px leveys on
300px
; - Leveyksille 601–880px leveys on
580px
; - Leveyksille 881px ja yli leveys on
860px
.
CSS näyttää tältä:
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;
}
}
Tuloksena saadaan seuraava. Kiinnitä huomiota tallenteen yläosassa näkyvään näytön leveyden muutokseen:
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Awesome!
Completion rate improved to 2.04
Joustavien Asettelujen Rakentaminen Eri Näyttökokoja Varten
Pyyhkäise näyttääksesi valikon
Nykyaikaisessa web-kehityksessä on kaksi lähestymistapaa: adaptiiviset ja responsiiviset layoutit.
Responsiiviset layoutit on suunniteltu sisältämään useita näyttövariaatioita, jotka voivat joustavasti siirtyä toisiinsa mahdollistaen elementtien venymisen ja kutistumisen. Kun selainikkunan kokoa muutetaan, sivun lohkot supistuvat tai venyvät sulavasti, ja tietyssä katkaisupisteessä niiden asettelu muuttuu vaakasuoran tilan optimoimiseksi.
Adaptiiviset layoutit sisältävät useita näyttövariaatioita, mutta muotoilun muutokset tapahtuvat kiinteiden hyppyjen kautta katkaisupisteiden välillä. Kun katkaisupiste saavutetaan, muotoilua ei voi muuttaa ennen seuraavaa katkaisupistettä.
Harjoitus
Harjoitellaan luomalla 2 div
-elementtiä. Ensimmäinen elementti käyttää adaptiivista asettelua ja toinen responsiivista asettelua. Lisäksi määritellään eri arvot background-color
-ominaisuudelle näytön koon muuttuessa.
- Leveyksille 0–320px väri on
#7f58af
; - Leveyksille 321–600px väri on
#64c5eb
; - Leveyksille 601–880px väri on
#eb4dba
; - Leveyksille 881px ja yli väri on
#feb326
.
HTML näyttää tältä:
<div class="adaptive"></div>
<div class="responsive"></div>
Adaptiivisessa asettelussa tulee lisäksi määrittää tietty leveys div
-elementille.
- Leveyksille 321–600px leveys on
300px
; - Leveyksille 601–880px leveys on
580px
; - Leveyksille 881px ja yli leveys on
860px
.
CSS näyttää tältä:
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;
}
}
Tuloksena saadaan seuraava. Kiinnitä huomiota tallenteen yläosassa näkyvään näytön leveyden muutokseen:
Kiitos palautteestasi!