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: