Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Oppiskele Joustavien Asettelujen Rakentaminen Eri Näyttökokoja Varten | Responsiivinen Web-Suunnittelu CSS:ssä
Edistyneet CSS-tekniikat

bookJoustavien 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:

question mark

Valitse oikeat väittämät.

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 6. Luku 3

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Awesome!

Completion rate improved to 2.04

bookJoustavien 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:

question mark

Valitse oikeat väittämät.

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 6. Luku 3
some-alt